1200字范文 > 预加载是什么？懒加载是什么？以及两者之间的区别

预加载是什么？懒加载是什么？以及两者之间的区别

时间：2020-03-12 13:25:58

1.什么叫懒加载呢？

（1）懒加载的介绍

懒加载其实也叫做延迟加载、按需加载，比如在长网页中延迟加载图片数据，是一种比较好的网页性能优化的方法。在比较长的网页或应用中，如果图片有很多，一下子之间把所有的图片都加载出来的话，耗费很多性能，而且用户说不定会把图片一一全部看完。

如果使用图片的懒加载的话，就可以解决上述问题咯，解决方法就是只加载在可视窗口内的部分图片，其余图片都先不加载，之后随着鼠标的滚轮或者滚动条的滚动，到哪了，哪里才会加载图片，通过这种方式，好处也很明显：

（1）网页的加载速度更快

（2）服务器的负载一定程度的减小了

懒加载的使用，一般适用于图片较多，页面列表较长的场景之中。

（2）懒加载的特点

减少无用资源的加载：使用懒加载明显减小了服务器的压力，减小了浏览器的负担提升用户的体验：如果同时加载了很多图片的话，那相对来说，用户的等待的时间也会随之增加，这样就很影响用户的体验，而使用懒加载的话，能明显减小用户的等待时间，大大的提升用户的体验感！防止加载过多的图片而影响其他资源文件的加载：会影响网站应用的正常使用

（3）.懒加载的实现原理

首先我们要明白，图片的加载是怎么产生的？图片的加载是由src属性引起的，当对src赋值时，浏览器就会请求图片资源，根据此特点，我们先用data-load属性来存储图片的路径，在需要加载图片的时候，将data-load中图片的路径赋值给src，这样就实现了懒加载啦。

（4）.实现一个懒加载

通过JS 实现一个懒加载：

（1）window.innerHeight 获取浏览器可视区域的高度

（2）document.body.scrollTop || document.documentElement.scrollTop 获取浏览器滚动过的距离

（3）xx.offsetTop 是元素的顶部，距离文档顶部的高度

（4）图片的加载条件： xx.offsetTop < window.innerHeight + document.body.scrollTop (即也就是当图片所在位置，进入到了当前浏览器的可视窗口中去)

请看代码啦：

<div><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'><img src ='loading.git' data-load="xx.png'></div><script>var img =document.querySelectorAll('img')function lazyLoad(){// 获取浏览器滚动过的距离var scrollTop = document.body.scrollTop || document.documentElement.scrollTop// 获取可视区域的高度var winHeight= window.innerHeightfor( var i=0; i<img.length ; i++){if(img[i].offsetTop < scrollTop + winHeight){img[i].src =img[i].getAttribute('data-load')}}}window.onscroll = lazyLoad</script>

2.什么叫预加载呢？

（1）预加载的介绍

资源预加载是另一个性能优化技术，预加载简单来说就是将所有所需要的资源全部都提前进行请求，把资源都先加载到本地上，这样之后用到的时候，就直接从缓存中取资源就好。

（2）为什么用使用预加载技术呢？

在网页全部加载之前，对一些内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的要么就会长时间的展示一片空白，直到所有内容加载完毕。

（3）实现预加载的几种办法

1.单纯使用css 实现预加载

#preload-01 { background : url (http://..../image1.jpg) no-repeat -9999px -99999px}#preload-02 { background : url (http://..../image2.jpg) no-repeat -9999px -99999px}#preload-03 { background : url (http://..../image3.jpg) no-repeat -9999px -99999px}

优点：容易而高效

缺点：该方法加载图片，会和页面中的其他内容一起加载，增加了页面的整体加载时间

2. css+ js 实现预加载

function preLoad(){document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px -99999px "document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px -99999px "document.getElementById('preload-01').style.background= "url(http:......) norepeat -9999px -99999px "}function addLoadEvent(func){// 获取 window 页面加载完成后，执行的函数var oldonLoad = window.onload// 如果类型不是函数，则直接将preLoad 赋值给其if(typeof windwo.onload != 'function'){window.onload= func}// 如果是，则在此基础上，在添加preLoad 函数，让其在页面加载完后执行else{window.onload= function(){if(oldonLoad){oldonLoad()}func()}}}addLoadEvent(preLoad)

此方法解决了单纯使用css的问题，实则就是将其在页面加载完成之后才加载

3.单纯的使用js也是挺不错的方法

function preloader (){var img1 = new Image()var img2 = new Image()var img3 = new Image()img1.src="http:...."img2.src="http:...."img3.src="http:...."}function addLazyLoadEvent(func){let oldonLoad = window.onloadif(typeof oldonLoad !=='function'){window.onload=func}else{window.onload=function(){if(oldonLoad){oldonLoad()}func()}}}addLazyLoadEvent(preloader)

4.利用ajax 实现预加载

该方法利用DOM，不仅仅可以预加载图片，还可以预加载CSS、JavaScript等相关的东西，相比于JavaScript，优越之处在于JavaScript 和css的加载不会影响到页面的加载。更简洁、高效。

用js实现css、js、以及图片的加载

window.onload= function(){setTimeout(function(){var head =document.getElementsByTagName('head')[0] // 获取头var css =document.createElement('link') // 创造link标签css.type='test/css' // 类型css.rel="stylesheet" // 外部样式的引入要加css.url='http:....css' // 路径var js =document.createElement('script') // 创scriptjs.type= 'test/javascript'js.src= 'http:......js' // 路径head.appendChild(css) // 添加到head中head.appendChild(js)new Image().src='http:......' // 图片的加载},1000)}

用ajax的话，实现js、css、图片的加载

window.onload = function() { setTimeout(function() { // 请求一加载jsvar xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); // 请求二，预加载 css文件xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); // 加载图片new Image().src = "http://domain.tld/preload.png"; }, 1000); };