2012-01-05 111 views
1

我有一個jQuery代碼:如何加載jQuery中加載iframe之前的圖像loading.gif?

<script type='text/javascript'> 
jQuery(function ($) { 
    $('.basic').click(function (e) { 
     var loading = '<img src="loading.gif"/>'; 
      $('<div></div>').load(loading); 
     var src = 'test.php'; 
      var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>'; 
      $.modal(html); 
      return false; 
    }); 
}); 
</script> 

如何加載之前加載圖像loading.gif一個IFRAME?

+0

如果你想loading.gif某處顯示,你需要真正把它放在你的頁面。就像你現在所做的那樣,它不會顯示,因爲它不在頁面中。在點擊之前加載像這樣的圖像的最佳方式是將圖像放入實際頁面的div中(以便在加載頁面時加載圖像)並使其顯示:最初無。然後,當您想要顯示它時,您只需使用.show()並且圖像已經加載並且它已經在頁面中。 – jfriend00 2012-01-05 02:40:21

+0

你也沒有正確使用'.load()'。它不需要HTML字符串。它需要一個URL來執行ajax調用並插入結果。這不是你想要的。 – jfriend00 2012-01-05 02:41:45

回答

0

您可以使用一個回調

<script type='text/javascript'> 
jQuery(function ($) { 
    $('.basic').click(function (e) { 
     var loading = '<img src="loading.gif"/>'; 

     $('<div></div>').load(loading, function() { 
     var src = 'test.php'; 
      var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>'; 
      $.modal(html); 
      return false; 
    }); //end of loading the image 
    }); //end of loading the iframe 
}); 
</script> 
1

我的解決辦法:

jQuery(function ($) 
{ 
    $('.basic').click(function (e) 
    { 
     $('<img />').bind('bind',function() 
     { 
      var src = 'test.php'; 
      var html = '<iframe src="'+src+'&output=embed" style="border:0"></iframe>'; 
      $.modal(html); 
     }).attr('src','loading.gif'); 
     return false; 
    }); 
});