Question

我在这里尝试了一些不同的解决方案来解决类似的问题，但是他们似乎都没有为我做任何事情。请参阅我的jsFiddle以查看我想要发生的事例：http://jsfiddle.net/Amp3rsand/HSNY5/6/

它会动画我想要的方式，但它依赖于.delay，当我希望它在图像加载完成后立即触发。 js中注释掉的部分是我尝试过的东西。

问题可能是图像实际上是div的背景而不是它自己的元素吗？我测试了它自己的<img>标签，但它似乎没有什么区别。我将图像作为背景，这样当我使用媒体查询时，很容易为移动用户或小屏幕交换不同的较小图像。

HTML：

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

我想在加载完成后想要触发的图像是'#image'的背景。然后我想让它动画为'不透明：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 detect when image has been loaded以获取防弹解决方案。

如果您坚持使用background CSS属性，则需要实现一种将图像作为编码为base64的数据网址发送的方式，如本答案中所述：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">

为图像加载设置不透明度

3 个答案: