JS实现非首屏图片延迟加载的示例

目标 减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。 思路 想要实现以上的目标,有几个地方需要思考。 1、如何判断哪些图片需要立即加载,哪些可以晚些再加载? 2、如何控制图片在指定的时候加载? 对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视口的位置(详细说明) 可以通过图中top和right的值判断图片是否在视窗中。 对于第二个问题,