2

我在这里尝试了许多针对类似问题的不同解决方案，但似乎没有一个对我有任何帮助。请参阅我的 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' 的容器

我目前只能使用本地加载的网站进行测试，因此无法模拟慢速连接。上面的代码是否符合我的要求？对不起，如果它应该很明显

4

3 回答 3

1

您的图像是通过 CSS 背景属性加载的，您将无法检测到它的加载。为什么不<img>为图像使用标签？

如果你使用<img>你可以阅读这个问题：Browser-independent way to detect when image has been loaded for a bullet-proof solution。

如果您坚持使用backgroundCSS 属性，则需要实现一种将图像作为编码为 base64 的数据 url 发送的方法，如本答案所述：https ://stackoverflow.com/a/13989806/2788

于 2013-08-27T02:42:12.010 回答
0

尝试动画

$('#image').animate({ opacity: '1'}, 600);
于 2013-09-08T12:42:56.740 回答
0

您可以将初始不透明度设置为 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">

于 2020-10-30T16:27:52.550 回答