前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JQuery之图片懒加载

JQuery之图片懒加载

作者头像
越陌度阡
发布2020-11-26 16:25:35
发布2020-11-26 16:25:35
4.6K00
代码可运行
举报
运行总次数:0
代码可运行

由于现在很多的网站都带有大量的图片,而图片的加载又会特别的慢,特别是在移动端,懒加载就显的特别重要了,说白了就是按需加载,用户要看到哪里就显示哪里,下面来记录一下懒加载的基本实现步骤!

1.引入jquery.js与jquery.lazyload.js,由于jquery.lazyload.js依赖于jquery,所以必须要引入jquery

代码语言:javascript
代码运行次数:0
运行
复制
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

2.配置lazyload,比如加载效果、没有加载时显示的默认图片等等,可以简单的封装一个方法,方便去调用.

代码语言:javascript
代码运行次数:0
运行
复制
function lazy(className) {

  $(className).lazyload({

       //图片显示时淡入效果
    effect: "fadeIn",

       //没有加载图片时的临时占位符
    placeholder: "images/default.png",

       //图片在距离屏幕 200 像素时提前加载.
    threshold: 200,

    //将图片加载放进click事件中(不常用)
    event:"click",
 
    //加载隐藏的图片(不常用)
    skip_invisible : false

        
    //其他配置项请查看官网
  });

}

3.调用懒加载,在动态加载img时添加class="lazy",并配置自定义属性data-original="请求的图片地址",方便与插件绑定,并定义图片的宽高,图片的宽和高可以写在class里

代码语言:javascript
代码运行次数:0
运行
复制
<img class="lazy" alt=""  data-original="后台请求的图片地址" width="640" height="480" />

在请求完图片数据循环完成时调用lazy方法

代码语言:javascript
代码运行次数:0
运行
复制
lazy('img.lazy');
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/02/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档