web性能优化之js图片懒加载

html

<div class="container">

			<ul>

				<li>

					<div id="first" class="pic"><img src="" alt="" trueimg="./img/HBuilder.png" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000001</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000002</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000003</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000004</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000005</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000006</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000007</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000008</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000009</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000010</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000011</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000012</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000013</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000014</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000015</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000016</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000017</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000018</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000019</div>

				</li>

				<li>

					<div class="pic"><img src="" alt="" trueimg="./img/timg.jpg" /></div>

					<div class="txt">0000000000000000000000000000000000000000000000000000000000000000000020</div>

				</li>

			</ul>

		</div>

　　css

            * {

                margin:;

                padding:;

                box-sizing: border-box;

            }

            li {

                margin-top: 10px;

                border-bottom: 1px solid #000;

                list-style: none;

                height: 100px;

            }

            .pic {

                width: 200px;

                padding: 10px;

                height: 100px;

                float: left;

                background: url(img/timg.gif) no-repeat center center;

                background-size: cover;

                background-origin: content-box;

            }

            .pic img {

                opacity:;

                display: none;

                border: 1px solid #000;

                width: 100%;

                height: 100%;

            }

            li:last-child {

                margin-bottom: 10px;

            }

            .txt {

                height: 100px;

                line-height: 100px;

                overflow: hidden;

            }

var imgList = document.querySelectorAll("img");

            var len = imgList.length;

            function loadImg(curImg) {

                var truesrc = curImg.getAttribute("trueimg");

                var oImg = new Image();

                var curPar = curImg.parentNode;

                oImg.src = truesrc;

                oImg.onload = function() {

                    curImg.src = this.src;

                    curImg.style.display = "block";

                    curPar.style.background = "none";

                    fadeIn(curImg);

                    oImg = null;

                }

                curImg.isLoaded = true;

            }

            function fadeIn(curImg) {

                var tar = 1;

                var interval = 10;

                var duration = 500;

                var step = (tar / duration) * interval;

                var curOp = parseFloat(getComputedStyle(curImg, null)["opacity"]);

                var timer = window.setInterval(function() {

                    if(curOp > 1) {

                        curImg.style.opacity = 1;

                        window.clearInterval(timer);

                    }

                    curOp += step;

                    curImg.style.opacity = curOp;

                }, interval);

            }

            function handleImg() {

                for(var i = 0; i < len; i++) {

                    var curImg = imgList[i];

                    if(curImg.isLoaded) {

                        continue;

                    }

                    var curPar = curImg.parentNode;

                    var a = curPar.clientHeight + curPar.offsetTop;

                    var b = document.documentElement.clientHeight + document.documentElement.scrollTop;

                    if(a < b) {

                        loadImg(curImg);

                    }

                }

            }

            setTimeout(handleImg, 1000);

            window.onscroll = handleImg;

设置定时器延迟加载图片，优化网站打开时间，当图片出现在可见范围就加载图片，否则就不加载。

web性能优化之js图片懒加载的更多相关文章

【前端优化】js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术
懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...
JS图片懒加载
简介当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
js 图片懒加载
图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
js图片懒加载（滚动加载）是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
js图片懒加载（滚动加载）判断是否生效
一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
js——图片懒加载
<img class="js-lazy-image centered" src="./img/dog-running.svg" width="4 ...
原生js图片懒加载特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js原生图片懒加载或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载当访问一个页面的时候,先把img元素或是其他元素的 ...

随机推荐

解题：USACO13FEB Taxi
题面因为每次只能载一头牛,所以总路程=每头牛的距离+回头路的最短距离,于是问题变成了如何求回头路的最短距离我们可以把起点和终点存在两个数组里,然后将两个数组排序后取对应位置相减的绝对值就是每次走回 ...
C标准库函数--文件IO操作函数。
C标准库文件读写函数总结:都是对文件流进行输入输出的函数分为对文件的有格式读写以及无格式读写一.文件的无格式读写根据每次读写字符的数量,分为三类:1.按字符读写文件按字符读有三个函数:以下三个函数 ...
Java入门：基础算法之计算三角形面积
本部分介绍如何计算三角形面积. /** * @author: 理工云课堂 * @description: 程序计算三角形的面积.三角形的底和高由用户输入 */ import java.util.Sca ...
Python【time】模块
import timeprint(type(11.234))print("输出结果为时间戳,float类型:",time.time())print("输出结果为本地时间元 ...
Kubernetes init container
目录简介配置 init container与应用容器的区别简介在很多应用场景中,应用在启动之前都需要进行如下初始化操作: 等待其他关联组件正确运行(例如数据库或某个后台服务) 基于环境变量或配 ...
浅谈 vue实例和 vue组件
vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...
SFTP上传下载文件、文件夹常用操作
SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...
秋色园QBlog技术原理解析：性能优化篇：缓存总有失效时，构造持续的缓存方案(十四)
转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...
bzoj 3309 反演
$n=p_1^{a_1}p_2^{a_2}…p_k^{a_k},p_i$为素数,定义$f(n)=max(a_1,a_2…,a_k)$. 给定a,b<=1e7求$\sum\limits_{i=1} ...
高性能流媒体服务器EasyDarwin
标准RTSP拉模式直播(EasyRelayModule):适合内部监控分布式部署(EasyCMSModule):负载均衡主要是用Reids作为负载

web性能优化之js图片懒加载

web性能优化之js图片懒加载的更多相关文章

随机推荐

热门专题