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元素或是其他元素的 ...

随机推荐

idea中Hibernate错误：无法解析表
idea中Hibernate错误:无法解析表这种情况主要是在idea中使用hibernate自定义注解,idea无法检查数据源 this inspecton controls whether the ...
【cdq分治】【P4390】[BOI2007]Mokia 摩基亚
Description 给你一个 \(W~\times~W\) 的矩阵,每个点有权值,每次进行单点修改或者求某子矩阵内权值和,允许离线 Input 第一行是两个数字 \(0\) 和矩阵大小 \(W\) ...
CMake 案例
单个源文件 # CMake 最低版本号要求 cmake_minimum_required (VERSION 3.11) # 项目信息 project (Demo) # 指定生成目标 add_execu ...
CSS的overflow属性介绍
overflow 属性规定如何处理如何处理不符合元素框的内容.用法如下:Object.style.overflow=visible|hidden|scroll|auto. 参数介绍: visible: ...
opencv 应用程序无法正常启动（0xooooo7b）
#include<iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui ...
转载OPENCV学习随笔
转载自亦轩Dhc http://www.cnblogs.com/daihengchen/p/5492729.html 学习笔记:使用opencv做双目测距(相机标定+立体匹配+测距). 最近在做 ...
Harris角点及Shi-Tomasi角点检测（转）
一.角点定义有定义角点的几段话: 1.角点检测(Corner Detection)是计算机视觉系统中用来获得图像特征的一种方法,广泛应用于运动检测.图像匹配.视频跟踪.三维建模和目标识别等领域中.也 ...
python【数据类型：集合】
Django templates and models
models templates models and databases models 如何理解models A model is the single, definitive source of ...
P3942 将军令
P3942 将军令梦里,小 F 成了一个给将军送密信的信使. 现在,有两封关乎国家生死的密信需要送到前线大将军帐下,路途凶险,时间紧迫.小 F 不因为自己的祸福而避趋之,勇敢地承担了这个任务. 不过 ...

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

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

随机推荐

热门专题