关于javascript延迟加载图片

今天在技术群中，有位童鞋问起了javascript延迟加载图片的问题，我在这就给大家说明下原理和实现方法。 延迟加载是通过自定义属性，把真实的img地址存到自定义属性中，如data-url=”img”,而图片真正的src存的是loading的图片，如src=”loading.gif”，通过JS来获取窗口的偏移量，当图片在窗口中的时候，再动态将data-url的值赋给src; 延迟加载的原理其实很简单的，因为浏览器解析html的时候，会把img中所有的src都加载，但是自定义属性中的图片是不会加载的，所有我们就采用了替换，这样浏览器刚打开页面加载的是loading的图标，而不是真正的图片，这样就能提高网站的加载速度。 实际项目应用中，可以先利用ajax先把图片的实际src赋给data-url，然后滚动带图片窗口时，在实时的替换img的src。