带加载进度的Web图片懒加载组件Lazyload
在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验。
Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏览的区域去自动加载对应的图片(用户还没有浏览的区域图片则不会进行加载)。
Lazyload 允许图片加载之前,指定一张相对较小的封面图。组件会优先加载封面图片,以优化用户浏览感受。当原图加载完成之后则会覆盖封面图片。
除此之外,Lazyload 还能获取到当前图片的加载进度。
效果演示
如何使用?
2.1 Html
- html set the
data-src
property. data-cover
is not necessary
<img class="img" data-src="http://xxx/img1.jpg" data-cover="http://xxx/img1-cover.jpg">
<img class="img" data-src="http://xxx/img2.jpg" data-cover="http://xxx/img2-cover.jpg">
<img class="img" data-src="http://xxx/img3.jpg" data-cover="http://xxx/img3-cover.jpg">
<div class="imgBg" data-src="http://xxx/img4.jpg" data-cover="http://xxx/img4-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img5.jpg" data-cover="http://xxx/img5-cover.jpg"></div>
<div class="imgBg" data-src="http://xxx/img6.jpg" data-cover="http://xxx/img6-cover.jpg"></div>
2.2 Import ./dist/Lazyload.js
file to the page
<script src="http://xxx/dist/Lazyload.js"></script>
or
let Lazyload = require('./dist/Lazyload.js');
2.3 Initialization
//Get elements
var eList = [];
eList.push.apply(eList, document.getElementsByClassName('img'));
eList.push.apply(eList, document.getElementsByClassName('imgBg'));
//Create Lazy
var lazy = new Lazyload({
obj:eList, //elements
range:200 //Extra range
});
// //custom tips
// lazy.tips = function(obj){
// var e = obj.o, //element
// schedule = obj.schedule; //load schedule
// console.log(e,schedule);
// };
//Init
lazy.init();
带加载进度的Web图片懒加载组件Lazyload的更多相关文章
- vue + vue-lazyload 实现图片懒加载
1.安装 npm i vue-lazyload -S 2.配置 main.js /***图片模板等懒加载 start ***/ import VueLazyload from 'vue-lazyloa ...
- python爬虫--图片懒加载
图片懒加载 是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
- js 函数的多图片懒加载(lazy) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片懒加载效果 页面需求 1 ...
- 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
- 图片懒加载,Selenium,PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 微信小程序的图片懒加载
在普通的web页面当中,我们都知道图片懒加载可以提升浏览器的加载速度.原理是图片用空或者占位图片进行显示,当屏幕移动到图片位置的时候,再把图片的地址换成它的地址.那么,在小程序当中呢,最近老大让看一下 ...
- Chrome 75 将原生支持图片懒加载
4 月 6 日,Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 load ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
随机推荐
- Python 基础知识总结
strptime() 根据指定的格式将一个时间字符串解析为一个时间元组. time.strptime(time_str[,format]) 返回strcut_time对象 #time_str 是时间字 ...
- python - 代码调试的好帮手sys._getframe()
python 的调试,令人非常忧伤,通过将输出路径打印的方式,可以提高很大的方便性: import sys #coding=utf-8 def get_cur_info(): print sys._g ...
- OpenStack Rally 质量评估与自动化测试利器
目录 文章目录 目录 问题描述 Rally 简介 应用场景 应用案例 Rally 安装 Rally 使用 Rally 架构 Rally Plugin 分析与实现 程序入口 执行 rally task ...
- 中国MOOC_零基础学Java语言_第2周 判断_1时间换算
第2周编程题 查看帮助 返回 第2周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...
- Java多线程学习——死锁的一个容易理解的例子
发生死锁的情况:多个线程需要同时占用多个共享资源而发生需要互相死循环等待的情况 public class Mirror { //镜子 } public class Lipstick { //口红 } ...
- 精读《Monorepo 的优势》
1. 引言 本周精读的文章是 The many Benefits of Using a Monorepo. 现在介绍 Monorepo 的文章很多,可以分为如下几类:直接介绍 Lerna API 的: ...
- xmake从入门到精通10:多个子工程目标的依赖配置
xmake是一个基于Lua的轻量级现代化c/c++的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 本文主要详细讲解下,如果在一个项目中维护和生成多个 ...
- Python实现批量执行华为交换机脚本
#!/usr/bin/python3 # -*- coding:utf-8 -*- import paramiko import time ssh = paramiko.SSHClient() key ...
- 【7.10校内test】T3经营与开发
[题目链接luogu] 它……又是个DP 我……我讨厌DP!? 然后又是读入,显然用快读啊:(数据范围还是很大的)(习惯) 然后我们发现,不论是损耗值维修值,还是采矿所得,维修花费,都带着个p,因此我 ...
- 图——图的Prim法最小生成树实现
1,运营商的挑战: 1,在下图标出的城市间架设一条通信线路: 2,要求: 1,任意两个城市间都能够通信: 2,将架设成本降至最低: 2,问题抽象: 1,如何在图中选择 n - 1 条边使得 n 个顶点 ...