首页 > 网站制作
一言推荐::D 获取中...

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

网站制作/ 2018-05-16/

  <SCRIPTtype=text/javascriptsrc="{dede:global.cfg_templets_skin/}/js/jquery.lazyload.js"></SCRIPT>
  <scripttype="text/javascript">
  jQuery(document).ready(
  $(function(){
  $("img").lazyload({placeholder:"{dede:global.cfg_templets_skin/}/grey.gif",effect:"fadeIn",threshold:200});
  });
  });
  </script>
oleou
  LazyLoad这个jQuery插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以在需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。
 
  LazyLoad原理:
 
  把img的src里的值,存放到自定义的original属性里,当图片滚动到浏览器可视区域内时,再把original里的值赋回到src里,实现分屏加载。

TAGS:

打赏 点赞
邮箱
验证码
昵称