GayHub位置:https://github.com/ApoorvSaxena/lozad.js

导入:

<script type="text/javascript" src="http://www.trancemelody.cn/bigi/js/lozad-v1.4.0.js"></script>

简单使用方式:

In HTML, add an identifier to the element (default selector identified is lozad class):
<img id="all" class="lozad" data-src="http://www.trancemelody.cn/bigi/images/enjoy/enjoy_v01-01_1_1.jpg" />

All you need to do now is just instantiate Lozad as follows:
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();

更新图片简单方式:

$("#all").attr("data-src","http://www.trancemelody.cn/bigi/images/enjoy/enjoy_v01-01_1_2.jpg");
$("#all").attr("data-loaded","false");
observer.observe();

The "data-loaded"="true" attribute is used by lozad to determine if an element has been previously loaded.

Lozad.js 简单使用的更多相关文章

  1. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  3. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  4. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  5. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  6. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  7. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  8. JS简单入门教程

    JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...

  9. js简单实现链式调用

    链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...

随机推荐

  1. 使用openresty && minio && thumbor 构建稳定高效的图片服务器

    备注: minio 是一个开源的s3 协议兼容的分布式存储,openresty nginx+lua 高性能可扩展的nginx 衍生版,thumbor 基于python 的图片处理服务器,支持图片的裁剪 ...

  2. JVM的基本结构及其各部分详解(二)

    3.2 栈帧组成之操作数栈 操作数栈是栈帧的主要内容之一,它主要用于保存计算过程中的中间结果,同时作为计算过程中变量临时的存储空间. 操作数栈也是一个先进后出的数据结构,只支持入栈和出栈两种操作,许多 ...

  3. java 获取键盘输入常用的两种方法

    java 获取键盘输入常用的两种方法 方法1: 通过 Scanner Scanner input = new Scanner(System.in); String s = input.nextLine ...

  4. threading模块小结

    这篇文章是别人文章的一个观后小结,不是什么原创. 首先第一个例子: import threading import time def worker():     print "worker& ...

  5. 【Python】2.x与3​​.x版本的选用&版本间的区别

    转自 http://www.runoob.com/python/python-2x-3x.html 一.2.x与3​​.x版本的选用建议 Python的3​​.0版本,常被称为Python 3000, ...

  6. 对poi-excel导出的浅层理解

    上一篇对excel导入做了浅层的解释,本文将对导出再做浅层解释. 仍然是相同的套路,只不过是反过来而已. 反过来方向理论上本来是这样的:cell-->row-->sheet-->wo ...

  7. python3学习笔记七(字典)

    参照http://www.runoob.com/python3/python3-dictionary.html 字典 字典是另一种可变容器模型,且可以存储任意类型对象. dict1 = {key1:v ...

  8. crossdomain.xml配置不当的利用和解决办法

    00x1: 今天在无聊的日站中发现了一个flash小站,点进crossdomain.xml一看,震惊 本屌看到这个*就发觉事情不对 百度一下,这是一个老洞,配置不当能引起各种问题就算能远程加载恶意的s ...

  9. C# 栈 、队列的概念

    栈: 也是System.Collections下的数据结构 存储依然是Object类型的对象 Stack 名字 = new Stack(); Count:实际拥有的元素个数 栈的释放顺序是先进后出(后 ...

  10. rpm软件包、yum软件仓库、systemd初始化进程

    rpm软件包.yum软件仓库.systemd初始化进程 作者:Eric 微信:loveoracle11g 红帽软件包管理器rpm (Redhat Package Manager) RPM会建立统一的数 ...