jQuery图片延迟加载插件jQuery.lazyload

  • A+
所属分类:前端技术
摘要

jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。

jQuery图片延迟加载插件jQuery.lazyload

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。

使用方法

引用jquery和jquery.lazyload.js到你的页面

<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/jquery.lazyload.min.js')}}"></script>

html图片调用方法

为图片加入样式lazy  图片路径引用方法用data-original

<img data-original="<?php echo $value->shangpinzhutu; ?>" alt="<?php echo $value->shangpinmingcheng; ?>" style="height: 290px;" class="lazy" />

js出始化lazyload并设置图片显示方式

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({
      	effect: "slideDown",
      	placeholder : "img/loading.gif",//用图片提前占位
      });
  });
</script>

参考设置

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});

插件地址

http://plugins.jquery.com/lazyload/

 

 

 

 

  • 我的微信
  • 请务必准确填写验证信息
  • weinxin
  • 我的微信公众号
  • 提供本博客以及生活资讯
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

关闭震动

目前评论:1   其中:访客  1   博主  0

    • avatar 电磁泵 0

      jQuery.lazyload,图片懒加载,是个不错的选择。