圖像加載時的動畫不透明度

Question

我在這里嘗試了許多不同的解決方案來解決類似的問題，但它們似乎都沒有為我做任何事情。 請參閱我的 jsFiddle 以查看我希望發生的事情的示例： http : //jsfiddle.net/Amp3rsand/HSNY5/6/

它以我想要的方式設置動畫，但它依賴於 .delay 當我希望它在圖像加載完成后立即觸發。 js中注釋掉的部分是我嘗試過的東西。

問題可能是圖像實際上是 div 的背景而不是它自己的元素嗎？ 我也測試了它自己的<img>標簽，但它似乎沒有什么區別。 我將圖像作為背景，這樣當我使用媒體查詢時，很容易為移動用戶或小屏幕交換不同的、較小的圖像。

HTML：

<header></header>
<div id="image">
    <div id="blah"></div>
</div>

我想在加載完成后觸發的圖像是“#image”的背景。 然后我希望它動畫為'opacity:1;' 而 '#blah' 和 'header' 動畫就位。

這是我現在正在使用的 jQuery，但它不正確：

$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);

在我的網站上，它是一個相當大的圖像，因此加載大約需要半秒鍾，但此代碼未考慮緩存或不同的網絡速度。

我做錯了什么或者我應該怎么做？

感謝大家

---

編輯：

我更早地使用了 imagesLoaded 插件，它似乎可以在我的網站上運行，但我不知道它是否真的在做我想做的事情，還是只是從上面模擬我的代碼。

$(document).ready(function() {
    $('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
  $('article').hide().fadeTo(600, 1);
  $('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});

'#homeimg' 是圖像作為背景的 div，'article' 是 '#homeimg' 和 '#caption' 的容器

我目前只能使用本地加載的網站進行測試，因此無法模擬慢速連接。 上面的代碼是否符合我的要求？ 對不起，如果它應該很明顯

Answer 1

您的圖片是通過 CSS 背景屬性加載的，您將無法檢測到它的加載。 為什么不為圖像使用<img>標簽？

如果您使用<img>您可以閱讀這個問題： Browser-independent way to detection when image has been loaded for an bullet-proof solution。

如果您堅持使用background CSS 屬性，則需要實現一種將圖像作為編碼為 base64 的數據 url 發送的方法，如本答案所述： https : //stackoverflow.com/a/13989806/2788

Answer 2

嘗試動畫

$('#image').animate({ opacity: '1'}, 600);

Answer 3

您可以將初始不透明度設置為 0，當圖像onload ，將不透明度設置為 1。使用 CSS 您可以在兩種狀態之間進行轉換：

 <style> .easeload{ opacity: 0; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; } </style> <img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">