Question

在ajax请求之后，我将部分插入页面。

现在我想等到所有图像都被加载，然后淡入它们。

$(document).ready不起作用，因为该文档已经准备就绪。我该怎么设置呢？

Answer 1

似乎与这些问题类似：

建议是使用插件来帮助：

Answer 2

您可以通过执行以下操作预加载图像并在完全加载后调用函数：

var img = new Image();
img.addEventListener('load', myCallBackFunction, false);
img.src = 'my/img/src/';

在这种情况下，一旦图像完全加载，将调用myCallBackFunction。因此，如果您有多个图像，则可以使用计数器跟踪它们是否已全部加载。例如：

imgReadyCounter = 0;

imgReadyCallBack = function(){
    imgReadyCounter++;
    if(imgReadyCounter === numOfImages){ //numOfImages would be however images you are loading
        //fadeIn your content
    }
}

//then do the following for each image
var img = new Image();
img.addEventListener('load', imgReadyCallBack, false);
img.src = 'my/img/src/';

这种方法的优点在于，即使用户已经在浏览器的缓存中拥有了图像，仍然会调用回调函数。许多其他技术将导致不为缓存图像调用回调。

Answer 3

你提前知道这些照片吗？如果是这样，你可以这样做：

 (function(){
    var preLoadImg = new Image();
    preLoadImg.src = "/images/button.png";

    var preLoadImgLoading = new Image();
    preLoadImgLoading.src = "/images/loading.gif";
})();

或者...

$('#img1').load(function(){
  // fadeIn
});

Answer 4

您可以使用预加载插件预加载图片，然后在完全加载后显示它们

此页面显示了使用jQuery加载图像。

http://codesnippets.joyent.com/

插入部分加载后运行javascript

4 个答案: