Question

求大神给解释一段jquery代码

需要解释的地方写在注释里了
源码下载地址http://www.lanrentuku.com/js/xiangce-923.html

这是一段判断页面中所有图片是否加载完的代码，加载完后执行start（）
var loaded= 0;
$thumb_imgs.each(function(){ //$thumb_imgs是获取img节点
var $this = $(this);
$('<img/>').load(function(){ // 问题1：为什么写成('<img/>')而不是('img')
++loaded;
if(loaded == nmb_thumbs*2) //nmb_thumbss是图片个数。问题2：为什么要乘以2
start();
}).attr('src',$this.attr('src')); //问题3：为什么要把自己的链接地址赋值给自己
$('<img/>').load(function(){ //问题4：为什么要执行两次
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src').replace('/thumbs',''));
});
我自己的：
$(window).load(function(){ //为什么这么写不行呢
$("img").each(function(){ //以下是展开动作
$(this).parent().width(206);
$(this).parent().height($(this).height());
pos_li=$(this).parent().position();
//alert(hh);
$(this).animate({top:pos_li.top+5,left:pos_li.left+5},1000,function(){
$(this).css({position:"relative",top:"",left:""})
});
})
});

参考他的：
var ii=0;
$("img").load(function(){ //为什么这么写不行呢
ii++;
if(ii==len_img){
$(".im_loading").hide();
$("img").each(function(){ //以下是展开动作
$(this).parent().width(206);
$(this).parent().height($(this).height());
pos_li=$(this).parent().position();
$(this).animate({top:pos_li.top+5,left:pos_li.left+5},1000,function(){
$(this).css({position:"relative",top:"",left:""})
});
})
}
})

Answer 1

#1， $('<img />')的意思是创建一个<img />元素，$('img')的意思是选择img标签
#2，因为它对每个图片执行了两次load，每次Load执行了一次++loaded，所以双倍
#3，请注意开头的var $this = $(this)，所以此处是将该img的src赋值给$('<img />')的src
#4，load第二个图片

从代码效果分析，这个网站首次加载了预览图，然后它对每个图片遍历，然后修改其src达到加载其他该图片相关的其他尺寸图片的目的，这样访问者点击查看大图的时候就不用再次等待图片下载了

追问

其实我在意他的 加载后展开的效果

我自己写了一个，当图片小还行，大了就没有展开效果，直接是最后结果了

自己写的代码写不下了 看问题补充， 求解释，一定追加分，谢谢啦~！

追答

$(window).load是不行的，应该是$(document).ready
window是没有load事件的。document的ready事件是jQuery提供的（可以认为等于body的load事件）

后面我就帮不到你了，具体执行结果和html的结构也是有关系的，所以不能只看js

Answer 2

1. 使用img将会全部默认第一个。
2. 我感觉不用乘以2啊，不知道这是为什么。
3. 这些是加载进来的，即便是开始时有默认的，但来后还是要重新赋值。
4. 这两个load有不同，明显下面的attr执行的操作就不同。
希望可以帮到你，不过何必去研究这种写到吐血的插件呢。

追问

取长补短
学习别人好的地方呗

追答

嗯！也有道理，不过，要是摊上这样的任务。恐怕这脑细胞就要折损了呢，哈哈。