搜 索

在网站中实现图片延迟加载效果

编辑:QTOOL.NET日期:2019-06-30203

在一些网站中,经常看见网站的栏目页图片或者文章之类的可以拖动或者选择加载更多进行加载,这是怎样实现的呢?
这里我们可以用到jQuery的lazyload插件,本文就简单介绍了在网站中使用这个插件的方法,它可以节省网站流量,让不可视的区域图片暂时不加载.
首先我们需要在使用延迟加载的页面中,加载jQuery的相关引用文件:jquery.js与jquery.lazyload.js文件.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
 
然后继续定义图片结构
<img src="img/grey.gif" data-original="img/example.jpg">
在lazyload插件要将图片地址写入data-original属性,需要加载的图片,地址写入 URL 属性才能实现延时载入图片效果
最后在js中激活这个插件.
<script type="text/javascript">
  $(function() {
      $("img.lazy").lazyload();
  });
</script>
或$("img.lazy").lazyload({effect: "fadeIn"});
常用的一些lazyload参数设置
  
$("img.lazy").lazyload({
  placeholder : "img/xxx.gif", //占位图
  effect: "fadeIn", // 载入特效,show 直接显示,slideDown 下拉, fadeIn 淡入 
  threshold: 300, // 距离边距提前加载
  event: 'click',  // 事件触发时才加载有click点击事件,mouseover鼠标划过事件
  container: $("#container"),  // 对某容器中的图片实现效果
  failurelimit : 10 // 加载N张可见区域外图片
});
 
比如:想设置载入图片的方式,可以使用threshold属性进行载入图片设置,
$("img.lazy").lazyload({ threshold :330});
以上代码是指在图片与屏幕边距,距离330px时载入新图片.

TAG标签:图片处理
此文章由QTOOL.NET编辑
最新文章

热门标签