传送门:官网地址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. java跨服务器请求url获得数据

    在项目中,有时需要通过请求远程服务器上的url获取数据(前提是程序所在服务器可以和url服务器ping成功), 用java在后台发送请求时,用到了java.net.URL, java.net.URLC ...

  2. sourceInsight *** more bytes are required

    现象:用sourceinsight修改的文件无法保存,提示 No enough space to save "XXX", xxx more bytes are required. ...

  3. laravel5.5服务提供器

    目录 1. 编写服务提供器 1.1 注册方法 register 1.1.1 简单绑定 1.1.2 绑定单例 1.1.3 绑定实例 1.1.4 绑定初始数据 1.2 引导方法 boot 2. 注册服务提 ...

  4. 四大关键步骤掌握CloudOps模型

    [TechTarget中国原创] 要让IT运维向云演进,企业必须拥抱自动化,并且改变资源预配的思考方式. 新涌现的术语CloudOps——云运维的简写,指代企业如何运行以及管理基于云的系统.并且,随着 ...

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

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

  6. DOS程序员手册(十)

    终于到(十)了~~~ 503页 ES:DI       指向未更新且未打开的FCB的指针 注释:该功能最初用来从命令行中析取文件,并以正确的格式来保存此文件 以便打开FCB.为了实现这个目的,可首先将 ...

  7. Java基础-7数组

    一).什么是数组: 数组是一组具有相同类型和名称的变量集合,把一系列相同类型的数据保存在一起,这些变量称为数组的元素:每个元素都有一个编号,这个编号叫做下标,下标从 0 开始:元素的个数被称为数组的长 ...

  8. selenium界面元素定位

    一.        Selenium界面元素定位 本文元素定位以das2为例 #导入包 from selenium import  webdriver #打开火狐驱动 driver=webdriver ...

  9. finally在return之后还是之前运行

    finally在运行前打印出来是return的数据,finally是最后修改的数据,如果finally存在对返回值的修改,则以finally修改的值为准. 综上所述,finally最后运行.

  10. ssh.sh_for_centos

    #!/bin/bash sed -i 's/#PermitRootLogin yes/PermitRootLogin yes/g' /etc/ssh/sshd_config sed -i 's/#Us ...