Question

我目前正在开发一个包含一些非常大图像的项目。为了在加载图像时产生平滑的淡入效果，我尝试使用带有jQuery 1.9.1的ready（），但由于某种原因它不起作用并在加载之前显示图像。

$("img").ready(function(){
$(this).fadeIn("slow");
});

我做错了什么？

修改谢谢！我使用Adeneo的方法：http://jsfiddle.net/hAm65/

Answer 1

从DOCS开始，只有文档有一个就绪事件：

.ready（）方法只能在与当前文档匹配的jQuery对象上调用。

你可以尝试更像这样的东西：

$("img").each(function(i,el){
    var img = new Image();
        img.onload = function() {
            $(el).fadeIn("slow");
        }
        img.src = el.src;
});

Answer 2

您无法为.ready以外的元素调用document。请改用

$("img").on('load', function(){
  $(this).fadeIn("slow");
});

Answer 3

如果要加载多个图像并需要等待所有图像完成，请尝试使用jQuery deferred对象：

function loadImages(src) {
    var deferred = $.Deferred();
    var image = new Image();
    image.onload = function() {
        deferred.resolve();
    };
    image.src = src;
    return deferred.promise();
}

以这种方式使用 -

var loaders = [];
loaders.push(loadImage('1.png'));
loaders.push(loadImage('2.png'));
loaders.push(loadImage('3.png'));
$.when.apply(null, loaders).done(function() {
    // callback when everything was loaded
});

jQuery图像准备就绪淡入淡出

3 个答案: