從ajax調用加載後的圖像褪色

我想在ajax調用後加載圖像後淡入圖像。
這種方式實際上發生淡入淡出，而不是用戶觀看圖像加載。從ajax調用加載後的圖像褪色

有人可以幫我嗎？

這裏的JS代碼片段：

success: function(data){ 
    $('.main-content').load(function() { 
     $(data).hide().prependTo('.main-content').fadeIn('slow'); 
    }); 
    return false; 
},

數據將在從PHP來呼應這樣的事情：

<div class='left-col-box'> 
    <div class='album_image'> 
    <div class='image_settings'> 
     <button class='delete_button' id='11'>Delete</button> 
    </div> 
    <img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' /> 
    </div> 
</div>

如果2對圖像進行上傳，可以有2左COL-盒串爲2個裝載的箱子。
我想要在fadeIn之前加載圖像。

來源

2013-01-12 user1952509

loader.show() //show some loading image 
$('img',data).load(function(){ 
     loader.hide //hide loader once img is loaded 
      $(data).prependTo('.main-content'); 
     }

來源

2013-01-12 09:49:27

完美！這工作像一個魅力。謝謝！ – user1952509

我正要刪除我的答案，我以爲我的理解來自你的問題是錯誤的。:) –

事情是，如果我做.fadeIn（500），它只是定期加載。我甚至無法褪色。有沒有辦法解決這個問題？ – user1952509

如果success回調data是生成的HTML，你首先需要將其固定，然後將其隱藏，比衰落了。

不知道$(data).hide()作品像預期的那樣在這一點上data是不在DOM中。

試試下面的（我不認爲你需要負載）：

success: function(data){ 
    $(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow'); 
    return false; 
},

DEMO - 加載圖像，並在逐漸淡化它，使用上面的代碼

以上DEMO使用建議的代碼並將生成的HTML前置，然後找到圖像標記，將其隱藏起來，然後慢慢淡入。

當然，如果你生成img標籤前期隱藏的，例如用display: none或類似的，那麼所有你應該需要的是：

$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');

來源

2013-01-12 09:51:07 Nope

嗯。我喜歡你的代碼的簡單性。它確保圖像將被加載嗎？如果我有一個巨大的圖像加載？ – user1952509

@ user1952509：只有在所有數據都準備好的情況下才能觸發成功。如果您想知道隱藏和褪色圖像的大小，可以更新小提琴，將佔位符圖像的寬度和高度更改爲大量值。目前我正在使用手機，現在無法檢查小提琴，對不起。 – Nope

Nvm。我找到了一個修復。謝謝你的幫助！ – user1952509

從ajax調用加載後的圖像褪色

回答

相關問題