var img = new image();
img.src = "小图占位.jpg"; //加载载占位的,和html在统一文件夹下,现实也要onlaod加载,当地加载速率快一点
img.onload = function(){
document.querySelector("body").appendChild(img);
}
var img_r = new image();//这个东西能够放到默许图片加载的onload里
img_r.src = "大图实在.jpg"; //下载实在的,长途服务器要求
img_r.onload = function(){
img.src = img_r.src //下载完后,替代占位
}
1,第一种方法,小图占位
2,第二种方法,容器背景图占位,img下载后放到容器里,遮住容器背景图
解释:服务器的图片在src以后就最先下载了,然则只有当图片onload(也就是图片下载完成)后往body里增加才会直接显示出来。。
$("#main_scroll").empty().html(data);
var imgs = document.querySelectorAll("img");
var img_arry = [];
for(var i = 0 ;i < imgs.length; i++){
img_arry[i] = imgs[i].src;
imgs[i].style.height = SW+"px";
imgs[i].style.width = SW+"px";
(function(index){
imgs[index].src = 'img/defalut.png';
imgs[index].onload = function(){
var temp_img = new Image();
temp_img.src = img_arry[index];
var height = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalHeight;
var width = (SW/this.naturalWidth>=1?1:SW/this.naturalWidth)*this.naturalWidth;
imgs[index].src = temp_img.src;
imgs[index].style.height = height+"px";
imgs[index].style.width = width+"px";
}
imgs[index].onerror = function(){
console.log("默许图片加载出错了"+index)
}
})(i)
};