jquery中的load()方法使用要点

 

　　今天做在线聊天网页，聊天可以配图，需要使用弹出层的方式浏览大图效果。总共三层，底层html主结构，中间半透明遮罩，顶层是缩略图放大后的大图。用户点击缩略图后在半透明遮罩上呈现大图。

　　因为在线聊天，图片数量和地址都是动态未知的，因此用户点击缩略图时，应该在body下动态生成一个大图元素，并居中显示。代码如下：

$(".smallImg").click(function(){
             var imgPath = $(this).attr("src");
             var zh_bigImg = "<img alt='大图' class='zh_bigImg'/>"
             var maskBg = "<div class='maskDiv'></div>"
             $("body").append(zh_bigImg).append(maskBg);
             $(".zh_bigImg").attr("src",imgPath); //将获取的缩略图src值赋给新生成的大图

     //以下代码用于设置大图的居中显示，先设置大图的css为绝对定位，且top:50%;left:50%.
             var bigImgTop = -$(".zh_bigImg").height()/2;
             var bigImgLeft = -$(".zh_bigImg").width()/2;
             $(".zh_bigImg").css({
                 "margin-top":bigImgTop,
                 "margin-left":bigImgLeft
             });
 
             var zhBigImg = $(".zh_bigImg").get(0); //将jq对象转化为js对象
             zhBigImg.onclick=function(){
                 $(".zh_bigImg,.maskDiv").fadeOut(function(){
                    $(this).remove(); //淡出效果完成后再移除此元素！
                 });
             }
         });

　　

　　当刚刚将缩略图的src赋给大图时，就来获取大图高度值和宽度值，这样似乎不妥。结果却是这样，新生成的大图位置始终在top:50%；left:50%处，F12打开调试窗口发现margin-top，margin-left都为0，在各大浏览器或多或少都会存在一些问题，时而有效时而无效。后来才发现，忘了使用load()方法。应该让大图加载完毕后，再来获取高度和宽度值。

 改为这样：

$(".zh_bigImg").load(function(){
            var bigImgTop = -$(this).height()/2;
            var bigImgLeft = -$(this).width()/2;
            $(this).css({
                "margin-top":bigImgTop,
                "margin-left":bigImgLeft
            });
})        

　后就正常了。

此外，jquery在处理页面动态创建的元素方面，好多地方都需要注意。它不会响应动态创建的元素的事件，只有用live()方法来绑定事件，才能解决问题（直接用原生的js不知道行不行）。比如点击大图，应该是清除这个元素。$(".zhBigImg").click(function(){$(this).remove()}),点击大图时页面是不会有任何响应的。改为:$(".zhBigImg").live('click',function(){$(this).remove()})则可以。