使用动态src javascript创建几个新的Image（）对象

我附加了一个大的图像，当它完成加载和淡入淡出，所有的工作都很好。我的问题是当有多个图像时。然后，只有最后一个小图像被替换（第一个图像）。我似乎不知道如何把它们分开。通过数据属性检索

src

URL。（）

---

如果您希望以静默方式加载图像并使其淡入，一个简单的解决方案是：

<img class="load-fade" src="url" />

---

我会这样重写代码：

$（函数（）{
$（“.js图像模糊”）.each（函数（）{
var$this=$（this）；
var$smallImage=$（“.js small image”，$this）；
变量$largeImage=$（“
。图像模糊{
背景色：透明；
背景尺寸：封面；
背景重复：无重复；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
溢出：隐藏；
}
.图像模糊img{
位置：绝对位置；
最高：50%；
左：50%；
最小高度：100%；
宽度：自动；
最小宽度：100%；
过渡：不透明度1s线性；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.图像模糊img.小图像{
-webkit过滤器：模糊（20px）；
过滤器：模糊（20px）；
位置：绝对位置；
}
.图像模糊img.is-large-image{
不透明度：0；
}
.图像模糊图像已加载{
不透明度：1；
}
身体{
保证金：3em0；
背景：银；
}
.集装箱{
位置：相对位置；
保证金：3em自动；
最小宽度：320px；
最小高度：560px；
边框顶部：3件纯黑；
底部边框：3倍纯黑；
}

为什么要混合使用本机DOM和jQuery？@Gothdo内联
onload
有什么问题？@hopkins-matt这简直是个邪恶的东西。@hopkins-matt看到了。@Gothdo谢谢你的链接！我想这更像是一个安全问题，或者是一些让你不喜欢它的东西。从我从那个问题中收集的信息来看，避免内联
on单击
，只需将语言分开，并允许同时向多个元素添加事件侦听器。实际上，不使用它的好处比使用它的坏处更多？
<img class="load-fade" src="url" />

$('.load-fade').hide().load(function() {
   $(this).fadeIn(1000);
});