图片懒加载插件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

});

时间: 2024-12-18 23:03:06

图片懒加载插件lazyload使用方法的相关文章

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

实现一个图片懒加载插件

实现一个图片懒加载插件-转 Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片. 一个简单的图片懒加载共涉及两个方面, 1. HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-

移动端图片懒加载插件

LazyloadImg介绍 LazyloadImg 轻量级的移动端图片懒加载插件原生js开发,不依赖任何框架或库支持将各种宽高不一致的图片,自动剪切成默认图片的宽高.比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形.完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题.简洁的API,让你分分钟入门!!! 快速入门 var lazyloadImg = new LazyloadImg({ el: '#ul [data-src]', //匹配元素 top

Js 之图片懒加载插件

一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></scrip

图片懒加载之lazyload.js插件使用

简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyload <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 1.将图片路径写入data-original属性2.给laz

Vue图片懒加载插件 - vue lazyload的简单使用

Vue module for lazyloading images in your applications. Some of goals of this project worth noting include: Be lightweight, powerful and easy to use Work on any image type Add loading class while image is loading Supports both of Vue 1.0 and Vue 2.0

支持BetterScroll和iScroll滚动插件的图片懒加载的插件

做H5长页面,内容都是一个个图片.优化页面速度,使用了图片懒加载插件. 下面我安利一款,我在网上寻找到这个懒加载插件zhanyouwei/m-lazy,是支撑BetterScroll和iScroll滚动插件的. 项目地址:https://github.com/zhanyouwei/m-lazy 项目介绍:https://segmentfault.com/a/1190000004656348 原文地址:https://www.cnblogs.com/Koming/p/10000337.html

实现图片懒加载

Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片. 一个简单的图片懒加载共涉及两个方面, 1. HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性.具体示例为: <

图片懒加载 lazyload.js使用方法

lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min