我正在尝试在for循环中使用jquery的加载函数将图像加载到我的产品目录中,其中图像的url由php脚本返回
var limit=12;
for (var count=1;count<=limit;count++) {
var img = $("<img />").attr('src', 'includes/ajax/getimgurl.php?pid='+count)
.load(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#product_img_"+count).append(img);
}
});
}
php文件返回将标题位置更改为图像的url,即在这种情况下
http://localhost/plum_final/images/products/SilkHotPinkHibiscus.jpg
请注意,base_url为http://localhost/plum_final/
直接使用时加载 图片加载得很好
答案 0 :(得分:2)
@Stephen Sarcsam Kamenar提到的问题与未将for循环的内部部分包装在闭包中有关。
因为.load是一个异步事件,所以传递给.load的回调只会在加载其中一个图像时运行。因为它关闭了对图像变量的访问权限,所以无论图像变量的最新值是什么,都将被用作追加的参数。
一个快速的解决方案是将for循环的内部逻辑包装在显式绑定的立即调用的函数表达式中。像这样:
var limit=12;
for (var count=1;count<=limit;count++) {
(function (count) {
var img = $("<img />").attr('src', 'includes/ajax/getimgurl.php?pid='+count)
.load(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#product_img_"+count).append(img);
}
});
})(count);
}
希望有所帮助:)