北京网站制作欢迎光临易企北京网络公司
您当前位置:易企北京网络公司 >> 网站制作 >> 浏览文章

使用JQ实现图片延迟加载功能

文章标签:使用,实现,图片,延迟,加载,功能,能使 发布时间:2015年05月30日 浏览74
在你的网页</head>上添加一下代码:  
 
  <SCRIPT type=text/javascript  src="{dede:global.cfg_templets_skin/}/js/jquery.lazyload.js"></SCRIPT>

<script type="text/javascript">
  jQuery(document).ready( 
      $(function() {
           $("img").lazyload({placeholder : "{dede:global.cfg_templets_skin/}/grey.gif",effect : "fadeIn",threshold : 200 });
      });
   });
  </script>



Lazy Load 这个 jQuery 插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以在需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。


Lazy Load原理:
把img的src里的值,存放到自定义的original属性里,当图片滚动到浏览器可视区域内时,再把original里的值赋回到src里,实现分屏加载。

上一篇:北京网站建设--网页兼容性问题该如何解决
下一篇:北京网站建设--网站是重建还是改版好
点击数:  相关搜索:使用 实现 图片 延迟 加载 功能 能使