前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于jQuery或Zepto的图片延迟加载插件

基于jQuery或Zepto的图片延迟加载插件

原创
作者头像
李洋博客
发布2022-11-03 13:02:32
3.2K0
发布2022-11-03 13:02:32
举报
文章被收录于专栏:李洋博客

当我们网站的页面图片过多时,加载速度就会很慢。尤其是用手机2G/3G访问页面,不仅页面慢,而且还会用掉很多流量。我们主题之前也都采用了图片的懒加载形式,但都不完美,部分主题还采用了占位图片来控制懒加载,今天换一种js图片懒加载,它原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有图片在可视区域才去请求加载,这样的话应该就能满足我们日常所需,好了不说废话先按照教程操作试试,后期主题会逐一更新,稍安勿躁!!!

基于jQuery或Zepto的图片延迟加载插件 第1张
基于jQuery或Zepto的图片延迟加载插件 第1张

实现原理

<img class="lazy" src="loading.png" data-src="img/example.jpg">

页面打开时首先会加载src里的图片,即很小的加载图;通过监听scroll事件,当图片在可视区域时,使用data-src替换src,加载真正的图片。

使用

实际使用时一般使用已经存在的插件,如lazyload插件。

lazyload插件网上能搜出很多,常见的是: 1、jquery.lazyload.js: 依赖jQuery

JavaScript

代码语言:javascript
复制
/*!
 * Lazy Load - jQuery plugin for lazy loading images *
 * Copyright (c) 2007-2015 Mika Tuupola
 * * Licensed under the MIT license: *   http://www.opensource.org/licenses/mit-license.php *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload *
 * Version:  1.9.7
 *
 */

http://www.appelsiini.net/projects/lazyload

2、lazyload.js: 依赖jQuery或者Zepto

JavaScript

代码语言:javascript
复制
/*!
 * An jQuery | zepto plugin for lazy loading images. * author -> jieyou * see https://github.com/jieyou/lazyload
 * use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
 * use component's throttle https://github.com/component/throttle (MIT)
 */

下载:https://github.com/52fhy/lazyload

以上二者用法是一样的,第二个基于第一个修改,以支持zepto。现在以第二个示例:

lazyload.js

1、引入

Markup

代码语言:javascript
复制
<script src="jQuery.js"></script><script src="lazyload.min.js"></script>

2、使用

Markup

代码语言:javascript
复制
<!--lazyload.js默认懒加载原图片属性是data-original--><img class="lazy" src="loading.png" data-original="img/example.jpg">
$(".lazy").lazyload();

3、配置

缺省:

JavaScript

代码语言:javascript
复制
defaultOptions = {
    threshold                   : 0, //图像提前多少加载,单位px
    failure_limit               : 0,
    event                       : 'scroll', //触发事件
    effect                      : 'show', //效果
    effect_params               : null, //effect的参数数组
    container                   : w, //使用容器,默认是window
    data_attribute              : 'original', //可以改成src,即对应data-src属性
    data_srcset_attribute       : 'original-srcset',
    skip_invisible              : true,
    appear                      : emptyFn,
    load                        : emptyFn,
    vertical_only               : false, //竖直方向滚动的页面中使用
    check_appear_throttle_time  : 300,
    url_rewriter_fn             : emptyFn,
    no_fake_img_loader          : false,
    placeholder_data_img        : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',    // for IE6\7 that does not support data image
    placeholder_real_img        : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
    // todo : 将某些属性用global来配置,而不是每次在$(selector).lazyload({})内配置}YAML复制全屏
}

示例:

JavaScript

代码语言:javascript
复制
$(function() {
  $(".lazy").lazyload({         
        effect : "fadeIn",//效果
        data_attribute : 'src',//可以改成src,即对应data-src属性
        event: 'scroll',//默认值
        container: $(".content"), //一般无需指定,即window。sui框架里必须指定
 });
});

代码记录完成,测试几天看看效果,如无问题后续逐一更新,如遇问题依情况而定,好了,假期回来之后工作肯定不少,抓紧时间工作去吧,有问题留言反馈!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现原理
  • 使用
  • lazyload.js
  • 缺省:
  • 示例:
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档