关于javascript延迟加载图片
2016-12-16 00:00
204 查看
今天在技术群中,有位童鞋问起了javascript延迟加载图片的问题,我在这就给大家说明下原理和实现方法。 延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img”,而图片真正的src存的是loading的图片,如src=”loading.gif”,通过JS来获取窗口的偏移量,当图片在窗口中的时候,再动态将data-url的值赋给src; 延迟加载的原理其实很简单的,因为浏览器解析html的时候,会把img中所有的src都加载,但是自定义属性中的图片是不会加载的,所有我们就采用了替换,这样浏览器刚打开页面加载的是loading的图标,而不是真正的图片,这样就能提高网站的加载速度。 实际项目应用中,可以先利用ajax先把图片的实际src赋给data-url,然后滚动带图片窗口时,在实时的替换img的src。
相关文章推荐
- JS作用域概念-预解析规则
- JS字符串操作大全
- js微博发布框
- 全面理解面向对象的 JavaScript
- 判断JS对象是否拥有某属性的方法举例
- js 组件的写法
- js上传图片并预览
- JS当前日期相加相减
- 100个直接可以拿来用的JavaScript实用功能代码片段
- JS切换卡效果
- 由数组随机化排序引出的对于js中sort()方法的理解分析
- 跳转页面的几种方法
- js基础之 正则表达式
- JavaScript跨域总结与解决办法
- 很奇怪的问题。点击button会自动刷新页面?
- fastjson
- 深入理解js闭包
- JavaScript继承方式详解
- phantomjs处理异步加载后,获取渲染后的页面源码
- $(window).scroll()无法触发