学习jquery 中遇到的小问题（有关图片预加载） 5
先上代码：<html><head><scripttype="text/javascript"src="../../jquery-1.10.2.js"></script><...
先上代码：
<html>
<head>
<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var imgs = [
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
];
var str = "";
for(var i=0;i<imgs.length;i++){
str = $("<img style='width:200px; height:200px;'/>");
str = str.attr("src", imgs[i]);
str.load(function(){
alert("img"+i+ " success!");
$("body").append(str);
});
}
});
</script>
</head>
<body>
</body>
</html>
大概意思是的，有两张远程图片，先预加载到系统当期加载完毕后输出 先输出“img0 success”并append到body上去，再输出img1并且append到body上去， 但是事与愿违， 结果却是两次都输出 “img2 success” 并且只有2张图片加载到了页面上，打上断点就完全正常了，不打断点就会出现这样的错误，求求哪位大大救救我！！！ 展开
<html>
<head>
<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var imgs = [
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
];
var str = "";
for(var i=0;i<imgs.length;i++){
str = $("<img style='width:200px; height:200px;'/>");
str = str.attr("src", imgs[i]);
str.load(function(){
alert("img"+i+ " success!");
$("body").append(str);
});
}
});
</script>
</head>
<body>
</body>
</html>
大概意思是的，有两张远程图片，先预加载到系统当期加载完毕后输出 先输出“img0 success”并append到body上去，再输出img1并且append到body上去， 但是事与愿违， 结果却是两次都输出 “img2 success” 并且只有2张图片加载到了页面上，打上断点就完全正常了，不打断点就会出现这样的错误，求求哪位大大救救我！！！ 展开
2个回答
展开全部
由于i++的执行比str.load()要早，所以第二次执行的时候str已经被覆盖，直接使用$("body").append(str);所加载的只有第二张图。
代码需要改成
<html>
<head>
<script type="text/javascript" src="../../jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var imgs = [
"http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg",
"http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg"
];
for(var i = 0; i < imgs.length; i++){
var str = $("<img style='width:200px; height:200px;'/>");
str.attr("src", imgs[i]);
str.attr("nowIndex", i);
str.load(function(){
var nowNode = $(this);
alert("img"+nowNode.attr("nowIndex")+ " success!");
$("body").append(nowNode);
});
}
});
</script>
</head>
<body>
</body>
</html>
如果需要记录当前i的值，只能记录在标签里面的自定义属性里了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你好，很高兴为你解答：
for(var i=0;i<imgs.length;i++){
str = $("<img style='width:200px; height:200px;'/>");
str = str.attr("src", imgs[i]);
str = str.attr("index", i);
//i的正确传值，index随意起名代表索引
//load函数内部获值方法，$(this).attr("index");
str.load(function(){
alert("img"+$(this).attr("index")+ " success!");
$("body").append(str);
});
}
//没有明白你所谓 “只有2张图片加载到了页面上，打上断点就完全正常了”，我看见var imgs = [只有两张图的路径]；
//如有疑问继续追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
