页面有大量图片,优化图片的加载方法
1. 图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
什么是图片懒加载问题:
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验
使用方法
载入 JavaScript 文件
<script src="~/Scripts/js/jquery.scrollstop.js" type="text/javascript"></script>
<script src="~/Scripts/js/jquery.scrollstop.min.js"></script>
<script src="~/Scripts/js/jquery.lazyload.js"></script>
<script src="~/Scripts/js/jquery.lazyload.min.js"></script>
插件下载地址:http://code.ciaoca.com/jquery/lazyload/