本文原链接：https://www.cnblogs.com/yaoyao-sun/p/10367193.html
图片懒加载与预加载
预加载
1.1什么是预加载？
预加载就是提前加载图片，当用户需要查看时可直接从本地缓存中渲染。为什么要使用预加载？
1.2当页面中图片比较大的时候，页面加载的时候会出现该区域空白的效果或者看到图片正在慢慢地加载出来，为了提高用户体验，需
要把这些图片提前加载到缓存中，当用户一打开页面的时候，这些图片就会快速的呈现出来，获得更好的用户体验效果。
方法1,在CSS background中加载：会增加页面的整体加载时间
#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }
方法2，JS new image对象，设置src加载：常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = ";;
img2.src = ";;
img3.src = ";;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {//onload中未挂载函数才执行该JS
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM
方法3，Ajax预加载,new Image()对象设置src
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', url;);
xhr.send();
xhr = new XMLHttpRequest();
xhr.open('GET', url;);
xhr.send();
// preload image
new Image().src = ";;
}, 1000);
};
常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。
function loadImage(url, callback)
{
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete)
{ // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function ()
{ //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来
};
}
测试用例：
function imgLoaded()
{
alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>
当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引起图片的onload事件
使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载（使用window.onload等）。
场景：
如果某一个效果需要更换背景图片，那么图片会临时去加载，这样会出现图片需要一段时间才能显示出来，用户体验就会变差，所以图片需要预加载。比如照片墙，滚动图片什么，需要无缝显示图片的，之前加载好图片才不至于要显示下一张图片的时候临时去拉图片导致显示图片过慢。
懒加载
2.1什么是懒加载?
懒加载又称延迟加载。当访问一个页面的时候，需要先把img元素或者其他元素的背景图先用一张默认的图片代替（占位图），这样子
浏览器渲染页面的时候就只需请求一次。当图片出现在浏览器可视区域的时候，才设置图片的真实路径，把图片显示出来。
2.2为什么要使用图片懒加载？
当页面中图片的数量多到一定数量的时候，并且图片大小比较大，比如各种商场网站，图片素材网等等。如果在页面一加载的时候就
加载全部图片，显然会影响网站加载速度和加大服务器负担，而且用户体验也必然不好，那么这时候可以采用懒加载。
2.3 懒加载具体实现原理
页面中的img元素之所以会发送http请求的原因是设置了src属性，否则浏览器就不会发送请求去下载这个图片。首先在页面中把所有
的图片用一张占位图进行占位，并且在元素下设置data-src自定义属性，存放图片的真实路径，当需要用到的时候取出该真实路径动
态添加给src。
意义： 懒加载的主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
图片没拉回来也会触发onerror事件
懒加载：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload 2</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'images/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
</script>
</body>
</html>
应用场景推荐链接
转载于:https://www.cnblogs.com/leftJS/p/11079585.html