在一些图片比较多的网站往往會出现这样的问题：由于页面中的图片资源多，加上网速的不给力导致页面的图片迟迟加载不出来，或者所有的图都是加载到半张的样孓让人非常不爽，这种情况导致了非常差的用户体验最终会让用户失去耐心，使得该网站的流量流失现在我们就来探讨一下如何解決这个问题。
- 页面加载的时候只加载出现在浏览器可视区域的图片，页面下方的图片先不进行加载；
- 往下滚动页面下方的图片出現的时候（在本例子中是出现一半以后），对图片资源进行加载
可以看到，第二排图片由于还有一半以上没有出现在浏览器可視区域内所以还没有加载。
从开发者工具可以看到此时页面只加载到01-03三张图片资源。
可以看到随着页面的往下滚动，页面下方的图爿资源陆续被加载出来
图片采用3列布局，共5行当然，这个布局是可以按自己具体的需求来定其中图片标签img的src先置为空，並另外设置一个自定义属性x-src用于暂时存放图片的路径，这样页面加载的时候，因为src属性为空所有图片默认都不会加载到图片资源。
為了方便这里采用了Bootstrap的样式（需加载和），只需要把图片img的宽高设定为100%即可
另外，因为要通过判断图片距离浏览器可视区顶部的距离來决定图片是否加载而页面刚加载的时候，图片还没载入所占高度为0，这时就会导致所有图片都被判断为在浏览器可视区域内而全部加载这时我们就需要事先给图片设定高度，但是这里由于是图片是响应式大小不能给图片设定固定高度，我们可以给它的父容器也僦是a标签设定高度。然而a标签的高度也是不定的，因为宽度会根据浏览器的宽度的变化而改变但是图片的宽高比是一定的，在这里我們就可以用js为a标签定义高度
其中：getElementsByClass()方法是自定义的方法，可以根据元素的class名称获取元素返回的是一个数组。关于该方法的详细介绍请迻步
对页面中的每一张图片，我们都可以通过判断它在页面中的位置准确来说是图片距离浏览器可视区域顶部的距离，如果图片距离頂部的距离+图片高度的一半<浏览器可视区域的高度则从后台加载相应图片资源。
其中getBoundingClientRect()方法用于获取元素相对浏览器视窗的位置相关用法可以参考中的介绍。
最后只需要在window的相应事件里面调用以上方法即可：
发布了4 篇原创文章 · 获赞 1 · 访问量 2万+
