js——图片懒加载
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="400" height="400" data-src="./img/dog-running.jpg">
.fade-in {
animation-name: fadeIn;
animation-duration: 1.3s;
animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
animation-fill-mode: forwards;
} @keyframes fadeIn {
from {
opacity:;
} to {
opacity:;
}
} .centered {
display:block;
margin:0 auto;
}
'use strict';
var images = document.querySelectorAll('.js-lazy-image'), config = {
rootMargin: '50px 0px',
threshold: 0.01
}, imageCount = images.length, observer;
if (!('IntersectionObserver'in window))
loadImagesImmediately(images);
else {
observer = new IntersectionObserver(onIntersection,config);
for (var image, i = 0; i < images.length; i++)
(image = images[i],
!image.classList.contains('js-lazy-image--handled')) && observer.observe(image)
}
function fetchImage(a) {
return new Promise(function(b, c) {
var d = new Image;
d.src = a,
d.onload = b,
d.onerror = c
}
)
}
function preloadImage(a) {
var b = a.dataset.src;
return b ? fetchImage(b).then(function() {
applyImage(a, b)
}) : void 0
}
function loadImagesImmediately(a) {
for (var d, b = Array.from(a), c = 0; c < a.length; c++)
d = a[c],
preloadImage(d)
}
function disconnect() {
observer && observer.disconnect()
}
function onIntersection(a) {
0 === imageCount && observer.disconnect();
for (var c, b = 0; b < a.length; b++)
c = a[b],
0 < c.intersectionRatio && (imageCount--,
observer.unobserve(c.target),
preloadImage(c.target))
}
function applyImage(a, b) {
a.classList.add('js-lazy-image--handled'),
a.src = b,
a.classList.add('fade-in')
}
js——图片懒加载的更多相关文章
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
- 【前端优化】js图片懒加载及优化
一.前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
- js图片懒加载(滚动加载)是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- js图片懒加载(滚动加载)判断是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
- web性能优化之js图片懒加载
html <div class="container"> <ul> <li> <div id="first" clas ...
- 原生js图片懒加载特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生图片懒加载 或 js原生图片预加载,html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
随机推荐
- 新Chrome浏览器不支持html5的问题
window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...
- VBA Editor Addins --> VBE插件模板开发众筹
https://www.cnblogs.com/Charltsing/p/VBEAddins.html QQ:564955427 8月8日测试版功能说明 1.VBE菜单的创建 2.toolwindow ...
- springboot2.0整合shiro出现ShiroDialect报错 找不到org/thymeleaf/processor/attr/AbstractTextChildModifierAttrPr
包版本过低,找最新包 https://mvnrepository.com/ <dependency> <groupId>com.github.theborakompanioni ...
- css高度自適應
高度自適應意思是高度能隨著瀏覽器的大小的變化而變化.
- ExcelTools使用
using NPOI.SS.Formula.Functions; using NPOI.SS.UserModel; using System; using System.Collections.Gen ...
- luogu2597-[ZJOI2012]灾难 && DAG支配树
Description P2597 [ZJOI2012]灾难 - 洛谷 | 计算机科学教育新生态 Solution 根据题意建图, 新建一个 \(S\) 点, 连向每个没有入边的点. 定义每个点 \( ...
- bzoj4671: 异或图——斯特林反演
[BZOJ4671]异或图 - xjr01 - 博客园 考虑先算一些限制少的情况 gi表示把n个点的图,划分成i个连通块的方案数 连通块之间不连通很好处理(怎么处理看下边),但是内部必须连通,就很难办 ...
- User-Agent 请求消息头
User-Agent User-Agent, 用户代理 请求消息头,其中包含了 客户机.客户端 的一些信息, 如 浏览器版本 和 类型, 操作系统的类型等. 具体解析 步骤, 推荐以下 博客文章 ...
- R语言统计学习-1简介
一. 统计学习概述 统计学习是指一组用于理解数据和建模的工具集.这些工具可分为有监督或无监督.1.监督学习:用于根据一个或多个输入预测或估计输出.常用于商业.医学.天体物理学和公共政策等领域.2.无监 ...
- 应用调试(三)oops
目录 应用调试(三)oops 引入 配置内核打开用户oops CONFIG_DEBUG_USER user_debug 设置启动参数测试 打印用户堆栈 分析栈 main的调用 title: 应用调试( ...