当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 懒加载预加载(图片)

懒加载预加载(图片)

2018年03月07日  | 移动技术网IT编程  | 我要评论

懒加载:只显示当前所能看到的页面的内容，这样做的好处可以减少服务器的压力，当页面继续往下拉的时候，再继续加载内容。

预加载:一般用于图片加载，预先加载图片，还可以预先判断图片是否加载成功，如果加载不成功，可以使用本地图片替换，这样也能达到美观的效果.

懒加载的主要代码:if(imgHeight < document.documentElement.clientHeight + document.documentElement.scrollTop){   //这里写要执行的函数 }

预加载的主要代码:

var temp_img = new Image()

temp_img.src = img_url +img.dataset.src;

temp_img.onload = function(){//这是加载成功的情况

img.src = img_url + img.dataset.src;

}

//加载失败的情况

temp_img.onerror = function(){

img.src = 'img/0.jpg';

}

说明:dataset是自定义属性，保存真正的img地址，img_url是图片静态地址。

 
 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网