Question

我有一个图像URL数组，我希望加载它们，以便获得正确的尺寸，然后根据需要使用它们/输出。

这是我处理的代码（循环图像URL的数组）：

for (var i = 0; i < data.IMAGES.length; i++) {

    var img = $("<img />").attr('src', data.IMAGES[i].url)
    .load(function() {

        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            console.log("Error");

        } else {

            // This does output, but not correctly...

            if ( this.width > 299 ) {
                cache.$shareImages.append('<div class="share-image">' + img + '</div>');
            }

        }

    });
}

jQuery似乎附加了内容，但是以一种奇怪的方式这样做。以下是生成的输出示例：

<div class="share-image">[object Object]</div>

我想输出动态创建的img标签。

为什么会发生这种情况以及如何解决？

谢谢， MIKEY。

Answer 1

你正在用：

进行字符串连接

 '<div class="share-image">' + img + '</div>'

...所以它基本上在toString()上img生成[object Object]。

也许你可以试试：

$('<div class="share-image"></div>').append(this).appendTo(cache.$shareImages);

编辑：请注意，.load()处理程序将在循环结束后异步运行，此时img变量将设置为循环中最后创建的img元素。因此在加载中使用this来引用刚刚加载的特定img。

Answer 2

您需要链接.append()，将图像附加到新创建的div，然后将其附加到目标

$('<div class="share-image"></div>').append(this).appendTo(cache.$shareImages);

工作示例：http://jsfiddle.net/blowsie/UCx73/

jQuery - 图像URL的打印数组不正确

2 个答案: