如何检查是否使用jquery下载了所有图像？

Question

我正在我的应用程序中创建一个简单的图像动画。文档中有多个图像。我希望当页面加载时，图像应该开始动画。我试过这个：

$(document).ready(function(){

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});

在我的本地服务器上，我得到了所需的效果，因为所有图像都会立即加载，但是当我在托管服务器上运行相同的代码时，我无法获得所需的效果。首先按顺序加载的图像开始动画，而其他图像在加载时动画。

我希望所有图像能够并行而不是串行动画。任何人都可以告诉我如何确保图像被加载，以便我可以为所有图像设置动画？

Answer 1

如果您的所有图片都在文档的HTML中（没有动态创建），那么您只需切换到使用$(window).load()，直到页面中的所有图片都加载完毕才会触发：

$(window).load(function(){

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});

Answer 2

只需将$(document).ready()功能更改为$(window).load功能为：

$(window).load(function() {

     $(".slide").animate({
        left:'250px',
        opacity:'0.3',
      });
});

这样做的原因是当DOM元素准备好被操作时会触发ready事件，无论是否下载了内容中的内容（如图像，视频等），load事件被触发当所有内容都已下载到DOM元素中时。

Answer 3

确切地说，dom ready状态表示已加载所有基本内容，并且页面已准备好与之交互。图像继续在后台加载。

您需要的是window.onload事件：

$( window ).load(function() {

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});