问题
有一个功能是,点击图片进行预览。当时在测试的时候发现新加入的图片,点击后只有一层黑的遮罩,预览图片看不见。
//加入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, {});
});