Blogger Information
Blog 2
fans 0
comment 0
visits 1216
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
加载的图片太多?快试试懒加载!
囉破~的博客
Original
711 people have browsed it
   今天在做***的过程中,调用后台的一个接口的时候,返回了93张图片,每张图片都是700*700,
 页面打开卡的比较严重。当然,作为一名合格的前端***师,我们必须采取一些措施,以提高用户体验。
 一方面向后台反应问题,叫他们将图片的大小修改成合适的,另一方面,我们前端也可以通过懒加载来
 减缓服务器压力,优化性能。就算是后台的图片很小,一下子加载那么多张图片,用户还有用户的手机也会受不了。
 
 下面介绍一种比较简单的懒加载方案:echo.js
 使用方法:
 html部分:
    <img class="lazy" src="/New_bbc/public/wap/static/images/loading.gif"  data-echo='+d.data[i].imgurl+' alt='+d.data[i].name+' />
    data-echo 是真正要加载进去的图片
css部分:
    .lazy{width:100%;height:100%;background: url('../images/loading.gif') center center no-repeat;} 

js部分
先引入文件
    <script type="text/javascript" src="__STATIC__/js/echo.js"></script>
	<script>
	echo.init({
    offset: 740,//离可视区域多少像素的图片可以被加载
   throttle: 150 //图片延时多少毫秒加载
	}); 
   </script>

OK,懒加载就是这么简单。


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post