JQuery lazyload简介
jQuery Lazy Load指的是在有长网页的网站上延迟加载内容的技术。这基本上是一种优化技术，通过只加载所需的部分，而不是一次性预取和加载整个网页，让用户在使用重型网站时不会减慢应用程序。懒惰加载的概念有助于延迟内容的加载，直到用户真正需要它。这有助于减少应用程序的启动时间，提高应用程序的速度，增强用户体验，并减少服务器负载。在这个主题中，我们将学习JQuery的懒惰加载。
语法
$(“selector.classname”).lazyload();
上面的语法使class classname的所有DOM元素都被懒惰加载，其中
- 选择器指的是DOM元素，它将被延迟加载。
- classname术语是不言自明的。
JQuery懒惰加载是如何工作的？
- jQuery懒加载也被称为按需加载，是一个用于优化网站内容交付的概念，通过延迟不必要的加载对象，直到它确实需要。
- 这种优化技术有助于提高性能，减少内存使用，节省系统资源，从而加快应用程序的速度。
- 让我们考虑一个有大型图片的重量级网站。用户想从这个网站上看到一个特定的图片，为此他发出了一个请求。现在，整个网页的所有内容都被加载了，但用户只看到了第一张图片并关闭了网页。这将不必要地导致资源的浪费，因为剩余的内容仍然没有被看到。懒加载是解决这个问题的方法。
- 放在页面底部或视口外的图片甚至不会被加载，直到用户一路向下滚动。这就是所谓的无限滚动，只有当用户向下滚动页面时，网页内容才会被加载，避免了预取和加载用户可能永远不需要的内容。
JQuery lazyload的例子
现在让我们看几个例子来详细了解jQuery的懒惰加载的概念。
例子#1
下面是一个在网页上实现jQuery Lazy Loading的例子。
代码。
<!DOCTYPE html> <html> <head> <script src="https://rawgit.com/intoro/Lazy_Load_JQuery/master/js/2_2_4_jquery.min.js"></script> <script src="https://rawgit.com/intoro/Lazy_Load_JQuery/master/js/1_9_7_jquery.lazyload.js"></script> <script> $(document).ready(function () { $("img.lazy").lazyload({ effect: "fadeIn", }); }); </script> </head> <body> <img class="lazy" data-original="1.jpg" width="700" height="700" /> <img class="lazy" data-original="2.jpg" width="700" height="700" /> <img class="lazy" data-original="3.jpg" width="700" height="700" /> <img class="lazy" data-original="4.jpg" width="700" height="700" /> <img class="lazy" data-original="5.jpg" width="700" height="700" /> <img class="lazy" data-original="6.jpg" width="700" height="700" /> <img class="lazy" data-original="7.jpg" width="700" height="700" /> <img class="lazy" data-original="8.jpg" width="700" height="700" /> </body> </html>
输出
- 当上述代码被执行时，下面的屏幕显示。
- 懒加载只允许那些在视口中的图片被加载到网页上，其余的图片只在用户向下滚动网页时加载。
- 在给定的例子中，这个网页上总共有8张图片，但如图所示，只有那些在视口中的图片被加载；其余的图片在用户开始向下滚动网页时被加载。
例子#2
下面是另一个例子，显示了jQuery Lazy Loading的实现。
代码。
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script> <script> $(document).ready(function () { $("picture.lazy img").lazyload({ threshold: 0, appear: function () { $.each($(this).siblings("source"), function () { var $this = $(this); $this .attr("srcset", $this.attr("data-srcset")) .removeAttr("data-srcset"); }); }, }); }); </script> <style> p { height: 800px; } </style> </head> <body> <p style="color: brown; font-weight: bold; font-size: 20px;"> The image is below and will only be loaded when the user scrolls to it. </p> <picture class="lazy"> <source data-srcset="1.jpg" /> <source data-srcset="2.jpg" /> <source data-srcset="3.jpg" /> <source data-srcset="4.jpg" /> <img height="700px" width="700px" /> </picture> </body> </html>
输出
- 当上述代码被执行时，下面的屏幕显示。
- 当用户开始向下滚动时，网站上放置在网页底部的图片被取走并加载到页面上，如下图所示。
例子#3
下面是另一个类似的例子，说明jQuery Lazy Loading技术。
代码。
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="https://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script> <script> function load(img) { img.fadeOut(0, function () { img.fadeIn(10000); }); } $(".lazyload").lazyload({ load: load }); </script> </head> <body> <div class="lazyload"> <p>Image1</p> <img src="1.jpg" width="700" height="700" /> </div> <div class="lazyload"> <p>Image2</p> <img src="2.jpg" width="700" height="700" /> </div> <div class="lazyload"> <p>Image3</p> <img src="3.jpg" width="700" height="700" /> </div> </body> </html>
输出
- 当上述代码被执行时，下面的屏幕显示。
- 所有的图片不是一次性加载到网页上，而是在它们进入视口时就被加载。
JQuery lazyload的优点
- 通过减少页面重量来减少应用程序的启动时间。
- 按需加载导致较少的内存消耗。
- 更少的时间和资源利用导致成本优化。
- 通过减少服务器负载提高应用程序的性能。
- 提供增强和丰富的用户体验。
- 避免了不必要的代码执行和资源下载。
JQuery lazyload的缺点
- 由于增加了额外的代码行，代码变得复杂。
- 对未加载的内容进行不当的索引可能会影响网站在搜索引擎上的排名。
总结
- 这篇文章让你了解了懒惰加载背后的概念和使用jQuery的实现。
- 懒加载是一种现代网络技术，用于优化系统资源，时间。
- 和内存。
- 它通过减少服务器负载和内存消耗，大大有助于提高应用程序的性能。
- 虽然有一些隐患，但它的巨大优势让我们忽略了它们。
