项目中遇到的问题-图片未加载成功

问题

有一个功能是，点击图片进行预览。当时在测试的时候发现新加入的图片，点击后只有一层黑的遮罩，预览图片看不见。

//加入image节点
var str = "";
str+='<img class="modal-img" src="'+ $(this).attr("src") +'">';
$("body").append(str);
$(".modal-img").each(function() {
    new RTP.PinchZoom(this, {}); //执行方法
});

可能原因

后来输出日志发现，图片的高度为0。应该是图片未加载完，就去执行new RTP.PinchZoom(this, {})了。

解决办法

用img.onload确保图片加载完

$(".modal-img").each(function() {
    var img = new Image(),self = this;
    img.src = this.src;
    img.onload = function(){
        new RTP.PinchZoom(self, {});
    }
});

参看参考链接

浏览器加载起来非常快,几乎在给img赋值src的时候,图片就已经加载完成,同时触发了onload事件,代码中为onload赋值的语句就相当于在onload事件发生后,这时候已经晚了.

所以优化的方案是

$(".modal-img").each(function() {
    var img = new Image(),self = this;
    img.onload = function(){
        console.log('imgLoad');
    }
    img.src = this.src;
    new RTP.PinchZoom(self, {});
});

参考

src与onload