Jquery图片懒加载和预加载

懒加载

1.什么是懒加载

Lazy Load也叫懒加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片，我们常常在很多的优秀网站上看到类似的例子，例如迅雷、土豆、优酷等，由于一个网页的图片非常多，一次性加载增加服务器压力，而且用户未必会拉到底部，浪费用户流量，Lazy Load采用按需加载，更快的加载速度从而达到优化网页的目的。

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。

在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

2.为什么要用懒加载

能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中。

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

4.案例

需要的HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#image {margin: 0 auto;padding: 10px;width: 80%;border: 1px salmon solid;/*开启弹性布局*/display: flex;/*wrap：换行，第一行在上方。*/flex-wrap: wrap;/*或者使用 两端对齐，项目之间的间隔都相等。*/justify-content: space-between;}.album {width: 150px;height: 150px;box-shadow: 1px 1px 5px silver;border-radius: 10px;animation: key1 3s infinite forwards alternate;}@keyframes key1 {0% {}20% {transform:translate(0px ,-13px);}40% {transform:translate(0px ,15px);}100% {transform:translate(0px ,0px);}}.album:hover {animation: key 0.5s;}@keyframes key {0% {}100% {transform: scale(1.2);}}.p1 {animation: key 4s infinite forwards alternate;font-size: 18;font-weight: bold;color: salmon;box-shadow: 1px 1px 5px silver;border-radius: 10px;width: 150px;border: 1px salmon solid;margin-top: 10px;margin-bottom: 15px;}.div1 {margin: 15px;}.button1{width: 100px;height: 40px;background-color: #FA8072;border: 1px sandybrown solid;box-shadow: 1px 1px 5px silver;border-radius: 10px;}.button1:hover{transform: scale(1.2);transition:all 0.5s ease-in-out ;background-color: antiquewhite;cursor: pointer;}* {margin: 0;padding: 0;}.bg {background-color: #f4f5f9;width: 100px;border: 1px solid darkgray;display: none;position: absolute;box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);z-index: 1000;}.bg ul {list-style-type: none;text-align: center;line-height: 40px;}.bg li:hover {cursor: pointer;background: #eee;color: #CC1A1A;}</style></head><body><div align="center" id="container"><div class="bg" id="bg"><ul><li>进入相册</li><li>删 除</li><li>修 改</li><li>****</li></ul></div><h1 align="center">相册</h1><div id="image" align="center"><div class="div1"><p class="p1">title1</p><img data-original="./a.jpg" class='album lazy' title="描述" /></div><div class="div1"><p class='p1'>title2</p><img data-original="./a.jpg" class='album lazy' title="描述1" /></div><div class="div1"><p class='p1'>title3</p><img data-original="./a.jpg" class='album lazy' title="描述2" /></div><div class="div1"><p class='p1'>title4</p><img data-original="./a.jpg" class='album lazy' title="描述3" /></div><div class="div1"><p class='p1'>title5</p><img data-original="./a.jpg" class='album lazy' title="描述4" /></div><div class="div1"><p class='p1'>title6</p><img data-original="./a.jpg" class='album lazy' title="描述5" /></div><div class="div1"><p class='p1'>title7</p><img data-original="./a.jpg" class='album lazy' title="描述6" /></div><div class="div1"><p class="p1">title8</p><img data-original="./a.jpg" class='album lazy' title="描述7" /></div><div class="div1"><p class='p1'>title9</p><img data-original="./a.jpg" class='album lazy' title="描述8" /></div></div><button class="button1" id="button1">添加新相册</button></div></body>
</html>

需要的js

注意：你必须给图片设置一个height和width，或者在CSS中定义，否则可能会影响到图片的显示

需要的jquery-3.4.1.js

链接：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA
提取码：1234

需要的 lazyload.js

链接：https://pan.baidu.com/s/1_118DY8mIDUhJs8dsq5JGg
提取码：1234

实现懒加载js代码

将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用。

<img class="lazy" alt="" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" />

             <script src="./jquery-3.4.1.js"></script><!-- 图片的延迟加载 --><script src="./lazyload.js"></script><script>$(function(){// 启动  延迟加载$("img.lazy").lazyload({placeholder : "./1.gif", //用图片提前占位// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect: "fadeIn", // 载入使用何种效果// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold: 200, // 提前开始加载// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉container: $("#container"),  // 对某容器中的图片实现效果  就是最外层的div 设置id 为 container就行了 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit : 10 // 图片排序混乱时// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.}).removeClass("lazy");})</script>

这里有如果使用 ajax 请求来评价的图片那么需要将上面的代码放入 ajax里才能有效

还有就是首页会有多个ajax 请求，所以要在每次ajax请求接口，渲染模板后都重调用延迟加载

为了防止重复渲染使用 .removeClass(“lazy”); 将指定的 lazy 属性删除这样就只会渲染一次

当然如果你在其他的地方还需要此lazy 属性那么就不要删除此属性

预加载

1.什么是预加载

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。

否则，如果一个页面的内容过于庞大，页面加载是从上到下加载的此刻你翻到后面那么页面图片都是白色的我们可以使用预加载提前加载好这些图片

3.案例

需要的html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#image {margin: 0 auto;padding: 10px;width: 80%;border: 1px salmon solid;/*开启弹性布局*/display: flex;/*wrap：换行，第一行在上方。*/flex-wrap: wrap;/*或者使用 两端对齐，项目之间的间隔都相等。*/justify-content: space-between;}.album {width: 150px;height: 150px;box-shadow: 1px 1px 5px silver;border-radius: 10px;animation: key1 3s infinite forwards alternate;}@keyframes key1 {0% {}20% {transform: translate(0px, -13px);}40% {transform: translate(0px, 15px);}100% {transform: translate(0px, 0px);}}.album:hover {animation: key 0.5s;}@keyframes key {0% {}100% {transform: scale(1.2);}}.p1 {animation: key 4s infinite forwards alternate;font-size: 18;font-weight: bold;color: salmon;box-shadow: 1px 1px 5px silver;border-radius: 10px;width: 150px;border: 1px salmon solid;margin-top: 10px;margin-bottom: 15px;}.div1 {margin: 15px;}.button1 {width: 100px;height: 40px;background-color: #FA8072;border: 1px sandybrown solid;box-shadow: 1px 1px 5px silver;border-radius: 10px;}.button1:hover {transform: scale(1.2);transition: all 0.5s ease-in-out;background-color: antiquewhite;cursor: pointer;}* {margin: 0;padding: 0;}.bg {background-color: #f4f5f9;width: 100px;border: 1px solid darkgray;display: none;position: absolute;box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);z-index: 1000;}.bg ul {list-style-type: none;text-align: center;line-height: 40px;}.bg li:hover {cursor: pointer;background: #eee;color: #CC1A1A;}</style></head><body><div align="center" id="container"><div class="bg" id="bg"><ul><li>进入相册</li><li>删 除</li><li>修 改</li><li>****</li></ul></div><h1 align="center">相册</h1><div id="image" align="center"><div class="div1"><p class="p1">title1</p><img src="" class='album ' title="描述" /></div><div class="div1"><p class='p1'>title2</p><img src="" class='album ' title="描述1" /></div><div class="div1"><p class='p1'>title3</p><img src="" class='album ' title="描述2" /></div><div class="div1"><p class='p1'>title4</p><img src="" class='album ' title="描述3" /></div><div class="div1"><p class='p1'>title5</p><img src="" class='album ' title="描述4" /></div><div class="div1"><p class='p1'>title6</p><img src="" class='album ' title="描述5" /></div><div class="div1"><p class='p1'>title7</p><img src="" class='album ' title="描述6" /></div><div class="div1"><p class="p1">title8</p><img src="" class='album ' title="描述7" /></div><div class="div1"><p class='p1'>title9</p><img src="" class='album ' title="描述8" /></div></div><button class="button1" id="button1">添加新相册</button></div></body>
</html>

需要的js

需要的jquery-3.4.1.js

链接：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA
提取码：1234

yujiaz.js

链接：https://pan.baidu.com/s/15M1TTtXemMCNtjm2zSeNGA
提取码：1234

实现预加载js代码

     <script src="./jquery-3.4.1.js"></script><!-- 图片的延迟加载 --><script src="./yujiaz.js"></script><script>var imgs = ["./1.gif", "./a.jpg"];$.preload(imgs, { // imgs: 图片数组或字符串 ['1.jgp', '2.jpg'] 或者 '1.jpg'order: 'ordered', // 默认无序加载each: function(count) {// 单个图片加载完成},all: function() {// 所有图片加载完成console.log("所有图片加载完成")//方式1// for (var i = 0; i < imgs.length; i++) {//   var str = "<div class='div1'> \//            <p class='p1'> Title" +i + "</p> \//             <img src=" + imgs[i] +" class='album ' width='100' height='100' /> \//          </div>"//    $("#image").append(str)// }//方式1//index是下标 , element是对象$(".album").each(function(index, element) {$(element).attr("src", imgs[0])})}});</script>

自己感受下效果就能发现所有的图片是同时加载好的而不是一张一张的加载

懒加载与预加载的对比

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载意义：

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载意义:

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

什么时候使用懒加载什么时候使用预加载呢?

当页面图片特别多的时候而且页面也特别长比如京东淘宝这些主页图片少说都几千张如果你全部都加载完那么等的花都谢了

这时候可以使用懒加载来只加载可视图或者靠近可视区的图片这样就大大的加快了访问的速度

当页面图片不是特别多的时候为了用户的体验效果我们可以使用预加载比如从淘宝进入到店铺里看某件商品介绍的时候切换的过程中就把该介绍页面的所有图片都加载完成了进去后无需等待

总结: 当前页面图片特别多的话就使用懒加载图片不是很多的话就使用预加载

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^