1

我有一组图像 URL，我希望加载这些 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 标签本身。

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

谢谢，米奇。

4

2 回答 2

2

你正在做一个字符串连接：

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

...所以它基本上做了一个toString()on img，production [object Object]。

也许你可以尝试：

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

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

于 2013-05-20T12:05:10.190 回答
2

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

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

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

于 2013-05-20T12:05:32.910 回答