传送门:官网地址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. Column 'sort' specified twice错误

    我使用的是mybatis框架出现的这个问题,如果你们也出现了这个问题的豪华,我想你们的sql代码一定是复制的吧,额哈哈哈

  2. 使用Oracle绿色客户端(InstantClient)连接远程Oracle的配置方法

    非常简单的配置,网上一搜,有很多,但是还是想记录下来,说不定以后需要了,直接进自己的博客看看也好啊. 下载了PLSQL Developer 11,安装好了发现不能连接远程数据库,但是又不想安装orac ...

  3. split array

    public boolean splitArray(int[] nums) { return dividSameSumGroup(0,nums, 0,0); } public boolean divi ...

  4. 《Cracking the Coding Interview》——第12章:测试——题目6

    2014-04-25 00:53 题目:你要如何测试一个分布式银行系统的ATM机? 解法:ATM是Automatic Teller Machine,取钱的.我想了半天,没找到什么很清晰的思路,也许是因 ...

  5. 抓取网站访问者的QQ号码

    开源,是一种精神.但不开源,并不是没有精神,而可能是代码写得惨不忍睹,我属于后者.(首先申明:对代码提出意见可接受,虚心接受,但不能人身攻击啊!)     最近闲的蛋疼,喜欢到处看看做得好的站点, 莫 ...

  6. 为什么要内存对齐 Data alignment: Straighten up and fly right

    转载于http://blog.csdn.net/lgouc/article/details/8235471 为了速度和正确性,请对齐你的数据. 概述:对于所有直接操作内存的程序员来说,数据对齐都是很重 ...

  7. StaticBox布局管理器

    wx.StaticBoxSizer构造方法如下: wx.StaticBoxSizer(box,orient = HORIZONTAL) box 是静态框对象,orient参数是布局方向  wx.HOR ...

  8. python学习总结---函数使用 and 装饰器

    # 函数使用 ### 零碎知识 - 灵活的if-else ```python a = 3 if False else 5 print(a) ''' if False: a = 3 else: a = ...

  9. unity射线碰撞检测+LayerMask的使用

    射线在unity中是个很方便的东西,对对象查找.多用于碰撞检测(如:子弹飞行是否击中目标).角色移动等提供了很大的帮助,在此做个总结与大家分享下 ,若有不足欢迎吐槽 好了,话补多说啦,直接进入主题: ...

  10. PHP高级——抽象类与接口的区别

    在学习PHP面向对象时,都会在抽象类与接口上迷惑,作用差不多为什么还那么容易混淆,何不留一去一?但是事实上两者的区别还是很大的,如果能够很好地运用PHP的两个方法,面向对象的程序设计将会更加合理.清晰 ...