jquery 延迟加载js
基础概念
jQuery 延迟加载（Lazy Loading）是一种优化网页性能的技术，它允许在页面滚动到某个元素时才加载该元素的资源，而不是一次性加载所有资源。这种技术可以显著减少初始页面加载时间，提高用户体验。
相关优势
- 减少初始加载时间：通过延迟加载，只有当用户滚动到某个元素时才加载该元素的资源，从而减少初始页面加载时间。
- 节省带宽：对于图片、视频等资源，延迟加载可以显著减少带宽消耗。
- 提高性能：减少服务器负载，提高网页的整体性能。
类型
- 图片延迟加载：当用户滚动到图片位置时才加载图片。
- 视频延迟加载：当用户滚动到视频位置时才加载视频。
- 脚本延迟加载：当用户滚动到某个元素时才加载相关的 JavaScript 脚本。
应用场景
- 长页面：对于包含大量图片或视频的长页面，延迟加载可以显著提高加载速度。
- 移动设备：在移动设备上，由于带宽和性能限制，延迟加载尤为重要。
- 动态内容：对于动态加载的内容，延迟加载可以确保只有当内容可见时才加载相关资源。
示例代码
以下是一个简单的 jQuery 图片延迟加载的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Images</title>
<style>
img {
width: 100%;
height: auto;
display: block;
}
.lazy {
background-image: url('placeholder.jpg');
background-size: cover;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<img class="lazy" data-src="image3.jpg" alt="Image 3">
<!-- More images -->
<script>
$(document).ready(function() {
function lazyLoadImages() {
$('.lazy').each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
var src = $(this).data('src');
$(this).attr('src', src).removeClass('lazy');
}
});
}
$(window).scroll(lazyLoadImages);
lazyLoadImages(); // Initial check
});
</script>
</body>
</html>遇到的问题及解决方法
问题：图片加载顺序不正确
原因：当用户快速滚动页面时，图片可能会在它们应该显示的位置之前加载。
解决方法：使用 IntersectionObserver API 来更精确地控制图片的加载时机。
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback to jQuery method
$(window).scroll(lazyLoadImages);
lazyLoadImages();
}
});通过使用 IntersectionObserver，可以更高效地处理图片的延迟加载，避免加载顺序不正确的问题。
相关·内容
1回答
在Datatable延迟加载中，我面临多个问题。任何解决这些问题的建议都是受欢迎的。请找到下面的代码。srchDelegate); {
//Set the visibility of
浏览 3提问于2014-10-24得票数 2
它不会被快速加载，我必须刷新页面才能加载它。我已经禁用了java脚本优化，但问题仍然存在。我用的是BETheme，Elementor，滑块旋转和可湿性粉剂火箭。
我应该如何解决这个问题？
浏览 2提问于2021-07-01得票数 2
是否可以将原始XMLHttpRequest或XDomainRequest转换为jQuery延迟对象(或将其包装在jQuery延迟对象中)？我试图这样做，因为在我的页面中，有一个XMLHttpRequest (或XDomainRequest)是在加载jQuery之前手动创建的，然后我希望将其转换为一个延迟对象，并在加载$.when调用时使用, using head.js or require.js
head.j
浏览 6提问于2013-10-16得票数 0
几天前，我使用的是jQuery彩色盒，它运行得非常好，但是在升级到jQuery v1.11.0之后，它突然完全停止工作了。<script src="http://code.jquery.com/jquery-1.11.0.min.js" defer="defer"></script>
<script src="http://code.jquery.c
浏览 3提问于2014-02-26得票数 0
回答已采纳
我的页面底部有一个延迟加载脚本。它可以加载脚本，但是现在缺少旧的jquery事件。"], "/js/jquery.unveil.js",
浏览 3提问于2015-03-24得票数 1
回答已采纳
我有<script src="{{ asset('js/app.js') }}" defer></script>在<head><script type="text/javascript这是否意味着jQuery已经包括在内了？我做过npm install和npm run dev
我的resources/js/app.js需要bootstra
浏览 0提问于2018-03-28得票数 16
回答已采纳
我在使用android的webview加载url 时遇到了一个很大的问题，它实现了延迟加载提示来提高webview的性能。每次访问url时，都会显示所有图片的整个html内容和默认图片，但当滚动页面时，稍后不会加载真实图片。我已经捕获了所有的请求包，没有下载延迟加载的js文件，包括(jquery.js和jquery.lazyload.min.js)，也没有图像请求，但当刷新url时，第二次延
浏览 5提问于2015-08-14得票数 0
<script src="https://use.resrc.it/0.9"></script><script src="https:&#x
浏览 0提问于2017-05-28得票数 0
我在resources/bootstrap.js文件中全局加载JQuery，如下所示。.$ = window.jQuery = require('jquery'); <script src="foo.js"></sc
浏览 0提问于2018-10-24得票数 0
我将所需的行添加到docpad.coffee中，以加载表added的css和js，并且在我要排序的表的页面中添加了对tablesorter()的调用。但是，由于两个原因，结果表没有正确排序:所有脚本都被推迟(defer=“延迟”)，而对tablesorter()的调用出现在加载脚本之前，如下所示： <>
浏览 3提问于2013-12-29得票数 0
回答已采纳
我试图使用jQuery的延迟图像加载插件来延迟加载我的图像。这是我的JS代码 jQuery("img.lazy").lazy({ });此脚本与其他脚本一起放在JS文件中的页面底部。<script type=&
浏览 4提问于2014-08-13得票数 1
回答已采纳
我在我的网页上使用了延迟加载的谷歌地图js插件，现在我想用另一个java脚本添加一个弹出窗口。到目前为止，在我的代码中它看起来是这样的：延迟加载可以工作，但是当我把代码放在后面的时候：
<script src="//ajax.googl
浏览 4提问于2015-04-03得票数 0
我正在尝试在WordPress中添加lightslider()，但是我得到了错误
Uncaught TypeError: jQuery(...).lightSlider is not a function(anonymous function) @ (index):99m.Callbacks.j @ jquery.js?ver=1.11.2:2m.Callbacks.k.fireWith @ jquery.js?ver=1.11.2:2m.extend.ready @ jquery.<e
浏览 1提问于2015-07-22得票数 5
2回答
如何在加载angularjs视图后加载javascript文件？
我想在视图上应用第三方脚本，但它只在我重新加载整个页面时起作用，而不是在调用视图时起作用。
浏览 34提问于2016-08-29得票数 0
我转而在一个应用程序中使用Require.JS，并立即面临这个问题：在加载之前，让jQuery的回调进入队列的最好方法是什么？我需要它们要么在jQuery已经加载的情况下立即触发，要么在加载后立即触发。
浏览 1提问于2012-06-19得票数 0
回答已采纳
我正在使用SquishIt MVC框架来捆绑和缩小应用程序中的js和css组件。PackageLibs(this HtmlHelper htmlHelper) var client = Bundle.JavaScript() .Add("~/scripts/jquery-ui-1.8.17.min.js")
浏览 2提问于2014-02-18得票数 0
回答已采纳
2回答
我正在尝试创建一个div，它将使用jquery的延迟加载来加载来自linkedIn的图像。当我查看在网上找到的示例时，它们似乎在我的浏览器上工作得很好，但当我尝试添加它时，它似乎不起作用。这是我到目前为止在渲染之前得到的代码： <head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquer
浏览 1提问于2011-09-14得票数 0
回答已采纳
我试图让懒惰加载js工作在一个wordpress网站，不能为我的生活使它工作。我尝试了插件，当他们工作时，他们懒得加载所有的图片，我不能让这种情况出现在我的主页上(说来话长，但这会引起跳跃式问题)。我只想在特定的页面上延迟加载图像。在过去，我只需链接到js文件，并将这个类延迟添加到我想要的图像中，但这显然是行不通的。我累了..。'/library/js/jquery.lazyload.min.<
浏览 3提问于2013-05-20得票数 0
我正在尝试加载一个需要jQuery才能运行的延迟加载程序插件。category-products .lazy').lazy();我得到了：然后是：
Uncaught TypeError: jQuery(...).lazy is not a
浏览 4提问于2018-09-15得票数 1
云服务器
ICP备案
云直播
对象存储
即时通信 IM
腾讯云开发者
