jQuery图像在就绪时淡入

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

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

我做错了什么

编辑： 非常感谢。我使用Adeneo的方法获得了它：

从，只有文档具有就绪事件：

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

您可以尝试类似以下内容：

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

从中，只有文档具有就绪事件：

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

您可以尝试类似以下内容：

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

---

对于

文档

本身以外的元素，不能调用

.ready

。用这个代替

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

---

对于

文档

本身以外的元素，不能调用

.ready

。用这个代替

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

---

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

以这种方式使用-

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对象：

以这种方式使用-

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
});

---

不要忘了在启动时隐藏图像。@TahaPaksu-如果打算淡入，这总是一个好主意。我假设OP使用CSS来实现这一点，所以我不会在代码中添加hide（），因为这通常只会导致恼人的闪烁。而且不要忘记在启动时隐藏图像。@TahaPaksu-如果想要淡入图像，这总是一个好主意。我假设OP使用CSS来实现这一点，所以我不会在代码中添加hide（），因为这通常只会导致恼人的闪烁。