A-A+

jquery scrollLoading实现图片延迟加载的例子

2016年01月11日 web前端设计 暂无评论 阅读 9 views 次

延迟加载插件我们最常用的是lazyload了,当然我们本文章要介绍的是scrollLoading实现图片延迟加载了,下面一起来看看吧。

一:关于图片延迟加载

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

二:实现方法

1:在页面引入jquery库文件

  1. <script type="text/javascript" src="/js/jquery/jquery-1.8.3.min.js?ver=1.11.0"></script>  

2:图片的地址和样式名设置

设置要延迟加载的图片为下面的格式:

  1. <img src="img/lazyload.gif" data-url="实际的图片地址" class="img-lazyload" />  

src:是图片的默认加载图片

data-url:是图片的实际地址

class:标识延迟加载图片的样式名

在页面的footer引入scrollloading文件和执行延迟加载的功能:

scrollloading 下载地址:

  1. /minty/js/jquery.scrollLoading.js  
  2. <script type="text/javascript" src="/wp-content/themes/minty/js/jquery.scrollLoading.js"></script>  
  3. <script type="text/javascript">  
  4.     $(function() {  
  5.         $(".img-lazyload").scrollLoading();   
  6.     });  
  7. </script>  

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

标签:

给我留言