传送门:官网地址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. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  2. 《Cracking the Coding Interview》——第5章:位操作——题目6

    2014-03-19 06:24 题目:将一个整数的奇偶二进制位交换,(0, 1) (2, 3) ... 解法:使用掩码来进行快速交换,定义掩码为'0101...'和‘1010...’. 代码: // ...

  3. 图的最短路径:Dijkstra 和 Floyd

    //最短路径 /* dijkstra Dijkstra(迪杰斯特拉)算法的核心思想是贪心策略+动态规划 http://www.programgo.com/article/4721147659/ Dij ...

  4. 关于mysqldump备份非事务表的注意事项

      Preface       We're used to get a logical backup set(whole instance) by simply specifying "-- ...

  5. paramiko类Fabric主机管理

    环境:Linux python3.5 要求:类 Fabric 主机管理程序开发:1. 运行程序列出主机组或者主机列表2. 选择指定主机或主机组3. 选择让主机或者主机组执行命令或者向其传输文件(上传/ ...

  6. SSH非交互式密码授权远程执行脚本

    公司有上百台服务器,需要为每台服务器都执行一个脚本,因为所有服务器的账号密码都是一样的,所以可以不用搭建ansible等自动化运维工具,我们直接通过SSH远程执行即可完成. 本文以三台服务器为例,系统 ...

  7. 团队项目-第九次scrum 会议

    时间:11.5 时长:40分钟 地点:F楼1039教室 工作情况 团队成员 已完成任务 待完成任务 解小锐 完成员工commit函数的数值函数编写 完成多种招聘方式的逻辑编写 陈鑫 实现游戏的暂停功能 ...

  8. HTML5初识Canvas

    HTML5初识Canvas <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. warning MSB3162: 所选的“Microsoft Report Viewer 2012 Runtime”项需要“Microsoft.SqlServer.SQLSysClrTypes.11.0”。在“系统必备”对话框中选择缺少的系统必备组件,或者为缺少的系统必备组件创建引导程序包。

    warning MSB3162: 所选的“Microsoft Report Viewer 2012 Runtime”项需要“Microsoft.SqlServer.SQLSysClrTypes.11. ...

  10. edp 基于node.js和npm的前端开发平台

    edp能做什么? 简洁的项目创建及包管理,多种工具进行本地调试,快速项目构建及代码检测,可扩展插件... 1. 安装 $ npm install -g edp 2. 包管理-导入依赖包 >edp ...