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. : LDAP & Implementation

    LDAP LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以根据需要 ...

  2. linux 极限环境下编译环境的安装

    前文:通常情况下在linux系统中安装一个软件包或者是服务有几种方式. 最简单的一种是在可以连接外网的情况下,配置好网络yum源,需要什么包就配置什么yum然后一路yum install 软件包名即可 ...

  3. glog学习(一):glog的编译及demo

    windows平台: 1.下载glog代码.下载地址:https://github.com/google/glog 2.使用cmake工具,获得对应的工程文件sln. 3.打开sln文件,生成对应的l ...

  4. MySql Scaffolding an Existing Database in EF Core

    官方文档详见:https://dev.mysql.com/doc/connector-net/en/connector-net-entityframework-core-scaffold-exampl ...

  5. 学习 Hadoop3.0 一、Hadoop3.0的安装与配置

    一.JDK1.8的安装 添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 安装Oracle-java-ins ...

  6. HTML禁止鼠标右键的代码

    禁止鼠标右键,把Demo的图片全都设为表格的背景,表格的大小与图片的大小一样.这样做看起来是一样的,主要是防止鼠标经过图片时会出现另存的按钮.禁止鼠标右键的代码很简单:<script LANGU ...

  7. 第17课 类型萃取(1)_基本的type_traits

    1. type_traits类型萃取 (1)type_traits通过定义一些结构体或类,并利用模板类特化和偏特化的能力,给类型赋予一些特性,这些特性根据类型的不同而异.在程序设计中可以使用这些tra ...

  8. 一个简单的通讯服务框架(大家发表意见一起研究)JAVA版本

    最近研究下java语言,根据一般使用的情况,写了个连接通讯服务的框架: 框架结构 C-Manager-S; 把所有通讯内容抽取成三个方法接口:GetData,SetData,带返还的Get; 所有数据 ...

  9. Oracle 循环查询

    select * from sys_department start with departmentid = '0303e461-2454-4d5a-bfea-2cd5a4c064c6' connec ...

  10. web.xml的加载过程配置详解

      一:web.xml加载过程 简单说一下,web.xml的加载过程.当我们启动一个WEB项目容器时,容器包括(JBoss,Tomcat等).首先会去读取web.xml配置文件里的配置,当这一步骤没有 ...