前端优化:图片延迟加载(适合首屏以外的内容)
2015-06-07 18:20
369 查看
原理:先用一张极小的图片来代替,等到内容加载完了,再向服务器请求真正的图片并替换,可以有效的减少等待时间。实现:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="a.jpg">
function loadImage(){ var deferImages=document.getElementsByTagName('img'); var curImg; var imgSrc; for(var i=0,len=deferImages.length;i<len;i++){ curImg=deferImages[i]; imgSrc=curImg.getAttribute('data-src'); if(imgSrc){ curImg.setAttribute('src',imgSrc); } } } window.onload=loadImage;这对于延迟加载首屏以后的内容很有用,提高加载速度。懒加载可以减少请求数(有可能不会去加载)或者延迟请求,减缓了服务器端的压力。可以有多种实现方式:1、使用settimeout或setinterval进行延迟加载,如果用户在加载前离开了,就不会去加载了。2、有条件的加载,当符合某个条件或者触发了某个事件才开始异步下载。3、可视区加载,仅加载用户可看到的区域,通过监控滚动条事件来加载图片。在距用户看到某图片一段距离前便开始加载,这样当用户往下拉的时候刚好可以看到图片。
相关文章推荐
- CSS 组合选择符
- <深入理解JavaScript>学习笔记(5)_强大的原型和原型链
- java 和 javascript CryptoJS 进行HmacSHA1加密
- CSS Positioning(定位)
- JQuery学习笔记(二)
- 一篇相当不错的js function详解 读了一定有收获
- JQuery中的事件和动画
- web开发与设计--js数据类型,js运营商
- AngularJS
- c# 解析JSON的几种办法
- C#返回Json,js解析Json,并添加到select标签中
- [leetcode][tree] Count Complete Tree Nodes
- JavaScript: Advanced
- ProgressBar样式集合
- 对于AngularJS的介绍
- 关于CSS的只言片语
- Html的一点点收获
- Html的一点点收获
- inode理解
- js实现删除等其他操作弹出的提示框