经常会遇到一个页面的加载图片很多,用户一进去就要等待很久的时间,全部耗在了图片的加载中,用户体验很不好,解决办法就是利用图片的延迟加载,只显示屏幕之内的图片,屏幕之外的不加载,只有图片的区域进入了浏览器可视窗口范围,则触发图片的加载并显示,这样的做法有两个好处,1:提高页面的加载速度;2:节省了流量。

1:在页面引入jquery库文件

  1. <script type="text/javascript" src="http://static.w3ceasy.com/6138b12ebb649f31c3bf431718a4024d/6138b12ebb649f31c3bf431718a4024d.gif"></script> 
  2.   

2:图片的地址和样式名设置
设置要延迟加载的图片为下面的格式:

  1. <img src="xxx.gif" data-url="实际的图片地址" class="scrollloading" /> 
src:是图片的默认加载图片
data-url:是图片的实际地址
class:标识延迟加载图片的样式名

在页面的footer引入scrollloading文件和执行延迟加载的功能:
  1. <script type="text/javascript" src="http://static.w3ceasy.com/12e806991265b3a5e902bcc4b2fbd28c/12e806991265b3a5e902bcc4b2fbd28c.gif"></script> 
  2. <script type="text/javascript"
  3.     $(function() { 
  4.         $(".img-lazyload").scrollLoading();  
  5.     }); 
  6. </script> 

浏览器按快捷键F12 ,滚动页面会看到控制台一张一张图片的动态加载。

附件文件下载:http://www.myboke.cn/uploadfile/2016/0201/20160201052423677.rar


返回顶部