首页 > 其他分享 >图片懒加载插件lazyload使用方法

图片懒加载插件lazyload使用方法

时间:2023-04-19 18:47:56浏览次数:40  
标签:lazy img 插件 lazyload 使用 加载 图片

一、如何使用:

Lazy Load 依赖于 jQuery。引入文件

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.lazyload.js"></script>

图片基本属性的设置

<img class="lazy"  src="img/grey.gif"   alt="图"  width="640"  height="480"  data-original="img/example.jpg" />

最后使用:

$(function() {

$("img.lazy").lazyload();

});
二、基本选项:

1、设置临界点

默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.

$("img.lazy").lazyload({

threshold : 200

});

2、设置事件来触发加载

你可以使用jQuery事件,例如click和mouseover。也可以使用自定义事件。

$("img.lazy").lazyload({

event : "click"

});

3、使用特效

默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)。

$("img.lazy").lazyload({

effect : "fadeIn"

});

4、加载隐藏的图片

为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({

skip_invisible : false

});

  

标签:lazy,img,插件,lazyload,使用,加载,图片
From: https://www.cnblogs.com/louqianzhu/p/17334279.html

相关文章

  • font-display 文本在网页字体加载期间保持可见状态
    为确保文本在网页字体加载期间保持可见状态,可以考虑以下几种方法:1.使用系统默认字体或web-safe字体:这些字体通常是已经在大多数操作系统和浏览器中安装和加载的,因此在页面加载期间可以立即呈现。这样,即使自定义字体尚未加载,文本也将始终可见。2.通过CSS实现字体预加载:可以在C......
  • 自定义Mybatis-plus插件(限制最大查询数量)
    自定义Mybatis-plus插件(限制最大查询数量)需求背景​ 一次查询如果结果返回太多(1万或更多),往往会导致系统性能下降,有时更会内存不足,影响系统稳定性,故需要做限制。解决思路1.经分析最后决定,应限制一次查询返回的最大结果数量不应该超出1万,对于一次返回结果大于限制的时候应该......
  • Java SpringBoot 加载 yml 配置文件中字典项
    将字典数据,配置在yml文件中,通过加载yml将数据加载到Map中SpringBoot中yml配置、引用其它yml中的配置。#在配置文件目录(如:resources)下新建application-xxx必须以application开头的yml文件,多个文件用","号分隔,不能换行项目结构文件application.ymlserver:po......
  • pytest结合allure-pytest插件 生成allure测试报告
     注意:allure-pytest 从1.7之后已弃用,从2.0版本开始迁移至 allure-python 项目(即使用allure2),另外要运行allure命令行也需要Java的支持。1、安装allure-pytestpipinstall-U allure-pytest 这将安装allure-pytest和allure-python-commons程序包,以生成与allure2兼容的报告......
  • [nacos]JAR启动并加载/解析Nacos yml格式的配置文件时,报“java.nio.charset.Malformed
    1问题描述原因1:字符集不匹配nacos中配置文件的字符集为A,应用程序的读取配置文件时使用了字符集B,导致使用字符集B解码文件二进制流时字符解码失败。一般问题出在中文注释上原因2:(yml文件)配置格式有误2解决思路2.1原因1:字符集不匹配时方法[1]删除nacos配置文件中......
  • Shifu物联网开发框架成为MicroK8s官方认证的Kubernetes插件
    Shifu物联网开发框架已经成为Kubernetes生态下MicroK8s官方认证的插件,这将极大地简化基于K8s的物联网应用程序的开发,帮助企业高效搭建获得安全、可控的生产级物联中台。MicroK8s是一个轻量级的CNCF认证的Kubernetes发行版,适用于云、工作站、边缘和物联网设备。Shifu用作K......
  • 影响页面首屏加载时间的因素
    项目增加后,首屏加载就会出现白屏的问题,一般首屏加载时间最好在2秒以内,才能不影响使用体验下面介绍下主要影响因素和解决办法:一、网络问题:1)可能是由于网络厂商和服务器性能决定2)请求太多,由于浏览器并行请求在8个以下,超出的只能排队等待,所以如果请求太多,不仅增加了网络T......
  • pandas读取Excel核心源码剖析,面向过程仿openpyxl源码实现Excel数据加载
    今天我们将研究pandas如何使用openpyxl引擎读取xlsx格式的Excel的数据,并考虑以面向过程的形式简单的自己实现一下。截止目前本人所使用的pandas和openpyxl版本为:pandas:1.5.2openpyxl:3.0.10今天所有的测试全部基于以下文件:pandas的read_excel核心代码这里我使用pycharm工具对以下代......
  • jmeter插件的安装
    前言jmeter常用的插件有很多,本身安装的jmeter是没有安装插件的工具,需要下载一个jar包,通过插件安装工具去安装jmeter插件plugins-manager.jar这个jar包就是用来安装jmeter插件的jar把这个jar包下载后放到jmeter的lib/ext目录下重启jmeter就可以用这个工具安装更多的插件安装插件......
  • 开发神器-idea 插件 mybatisPlus
    1.idea安装过程File-->settings-->Plugins-->Marketplace搜索MyBatisPlus安装后重启idea 2.好处一:Mapper或者Dao--->xml方便切换  3.好处二:快速生成 Controller、Service、ServiceImpl、Mapper、Entity 、xml等文件第一找到Other,第二配置数据库链接......