图像加载时的动画不透明度

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">