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. ubuntu 菜单栏和终端都消失了,鼠标也成了一个× 解决办法!!!

    办法1: ctrl+alt+f1  进入命令模式 依次下载 sudo apt-get update sudo apt-get install --reinstall ubuntu-desktop su ...

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

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

  3. algernon 基于golang 的独立的支持redis lua pg。。。 的web server

    algernon 看到github 的介绍很很强大,一下子想到了openresty,功能看着很强大,支持 redis pg lua markdown quic http2 mysql 限速 pongo ...

  4. js 判断是否可以打开本地软件

    js判断时候可以打开本地的软件或者插件 点击一个按钮,打开本地的软件,比如问题反馈,需要调起本地的邮箱,填入一些信息. 这个功能<a>标签有提供支持,但是如果本地没有安装邮箱,则无法打开, ...

  5. Spring Boot - 基础 POM 文件

    表 1. Spring Boot 推荐的基础 POM 文件 名称 说明 spring-boot-starter 核心 POM,包含自动配置支持.日志库和对 YAML 配置文件的支持. spring-b ...

  6. centos 7.x开放端口

    1. 查看已打开的端口 # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=666/tcp 若此提示 FirewallD is not ...

  7. delphi字符串分割

    function GetLeft(sText, sepStr: string): string; var p: Integer; begin p := Pos(sepStr, sText); then ...

  8. PCB行业研究

    PCB行业研究 PCB产业上下游 关于HDI电路板 主要用于手机行业,对电路板面积有严格要求. 啥时候铜材料上涨

  9. 织梦Dedecms文件目录结构

    Dedecms文件目录结构 /根目录 ../a 默认生成文件存放目录 ../data 系统缓存或其他可写入数据存放目录 ../dede 默认后台登录管理(可任意改名) ../images 系统默认的部 ...

  10. bzoj5048: 塌陷的牧场

    Description 农夫小Q将他的奶牛们饲养在一个长n宽m的矩形网格牧场中.行从上到下依次编号为1到n,列从左往右依次编号为1 到m.为了防止奶牛们逃跑,小Q在牧场外圈安装了一排电网,只要奶牛走出 ...