在 jQuery 中创建图像并在加载后添加到 DOM答案

【问题标题】：Creating an image in jQuery and adding to DOM after load在 jQuery 中创建图像并在加载后添加到 DOM
【发布时间】：2013-05-30 16:36:32
【问题描述】：

我有一个创建图像对象的函数。我给图像一个 src，然后我添加一个加载函数，一旦加载就将图像添加到 DOM。它可以工作，只是它总是向页面添加 2 个图像实例，我不知道为什么。谁能告诉我为什么这会在我的页面上添加两张图片？

var img = new Image();

$(img).load(function () {               
    $('#imageContainter').append(this);
    $(this).fadeIn();
})              
.error(function () {
    // notify the user that the image could not be loaded
})              
.attr('src', '' + _filename);

“_filename”是源路径，“imageContainer”是我加载图像的 div。

任何帮助将不胜感激。

【问题讨论】：

您是否在 FireFox firebug 或 Chrome 开发工具中检查过它是否被多次调用？

标签： jquery image onload

【解决方案1】：

$(new Image()).attr('src', '' + _filename).appendTo($('#imageContainter')).fadeIn();

如果“错误”部分很重要，您可以检查 src 或其他内容。

如果您不提供任何淡入淡出时间，我还建议使用 show() 而不是 fadeIn()

【讨论】：

我的猜测是，当您附加新的 DOM 元素时，加载方法会执行，因为新元素已加载，而当您提供新的源时，它会再次执行，因为新的图像源。