等到執行功能之前圖像加載

Question

我正在嘗試創建一個簡單的投資組合頁面。 我有一個拇指和圖像列表。 單擊拇指時，圖像將會改變。

單擊縮略圖時，我希望圖像淡出，等到圖像加載，然后淡入。我現在遇到的問題是有些圖像非常大，所以它會淡出，然后立即淡入，有時在圖像仍在加載時。

我想避免使用setTimeout，因為有時圖像的加載速度會比我設置的時間更快或更慢。

這是我的代碼：

 $(function() {
     $('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));

     $('ul#thumbs li img').click(function() {
         $('img#image').fadeOut(700);

         var src = $(this).attr("src");
         $('img#image').attr("src", src);

         $('img#image').fadeIn(700);
     });
 });

<img id="image" src="" alt="" />
<ul id="thumbs">
    <li><img src="/images/thumb1.png" /></li>
    <li><img src="/images/thumb2.png" /></li>
    <li><img src="/images/thumb3.png" /></li>
</ul>

Answer 1

你可以這樣做：

$('img#image').attr("src", src).one('load',function() {
  $(this).fadeIn(700);
}).each(function() {
  if (this.complete) $(this).trigger('load');
});

如果圖像被緩存，在某些瀏覽器中.load()將不會觸發，因此我們需要通過檢查.complete並手動觸發加載來檢查和處理這種情況。 .one()確保當時是否緩存或加載， load處理程序僅觸發一次。

Answer 2

 $(function() {
     $('img#image').attr("src", $('ul#thumbs li:first img').attr("src"));

     $('ul#thumbs li img').click(function() {
         $('img#image').fadeOut(700);

         var src = $(this).attr("src");
         $('img#image')
             .attr("src", src)
             .load(function() {
                 $(this).fadeIn(700);
             });


     });
 });

<img id="image" src="" alt="" />
<ul id="thumbs">
    <li><img src="/images/thumb1.png" /></li>
    <li><img src="/images/thumb2.png" /></li>
    <li><img src="/images/thumb3.png" /></li>
</ul>

Answer 3

您需要對動畫進行排隊。

有關更多信息+可能的解決方案，請參閱此頁