传送门:官网地址jQuery Lazy Load v1.7.2下载Github

使用方法:

1.引用js文件

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2.修改HTML代码中需要修改的IMG标签

<!--
将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片)
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

3.调用Lazy Load

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

jQuery Lazy Load图片懒加载的更多相关文章

  1. 用jquery写的图片懒加载

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

  3. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  4. jquery 图片懒加载

      jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...

  5. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  6. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  7. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  8. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  9. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

随机推荐

  1. 获取IMSI

    转:http://letsunlockiphone.guru/find-imsi-number/ HOW TO FIND IMSI NUMBER (UPDATED) You probably alre ...

  2. 掌握OpenStack部署的最佳实践 打破部署失败的魔咒

    部署OpenStack环境并不是一项简单的任务:根据SUSE最近的调查显示“曾经部署过OpenStack的企业当中有一半都失败了”.然而,随着最佳实践的出现,企业可以使用其避免在部署OpenStack ...

  3. 使用闭包和lambda解决问题与常规方式解决问题的对比。

    先来描述一下问题吧,游戏中的物品原来只有一个属性加成:攻击,防御,获得经验加成,金币加成,等等.现在要增加一个属性,这个属性可以为之前的属性之一. 这个属性加成涉及到类里的三个属性,value,typ ...

  4. 剑指Offer - 九度1355 - 扑克牌顺子

    剑指Offer - 九度1355 - 扑克牌顺子2014-01-30 23:19 题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^). ...

  5. B树、B-树、B+树、B*树 红黑树

    转载自:http://blog.csdn.net/quitepig/article/details/8041308 B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): ...

  6. Python学习5,三级菜单实例

    _author_ = "Happyboy" data = { '北京':{ "昌平":{ "沙河":["Happyboy" ...

  7. python-configparser模块,xml.etree模块

    操作键值对文件 #文件db格式为 [section] a = 1 b = 2 [section1] d = 3 c = 4 import configparser #获取所有节点 config = c ...

  8. markdown备忘

    文章主要(99%)参考自:markdown基本语法 这是二级标题 这是加粗的文字 这是倾斜的文字` 这是引用的内容 这是引用的内容 以下是分割线: 超链接 列表内容1 列表内容2 列表内容3 1.列表 ...

  9. 软工实践 - 第十七次作业 Alpha 冲刺 (8/10)

    队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/articles/10023469.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长 ...

  10. gulp-API介绍

    使用gulp,一般只需要用4个API:gulp.src(),gulp.dest(),gulp.task(),gulp.watch(). 1. gulp.src() 用来获取流的,但是要注意的是这个流里 ...