JavaScript实现图片延迟加载：三种方法详解

8 浏览量更新于2024-08-31 收藏 61KB PDF 举报

"javascript实现图片延迟加载方法汇总(三种方法)" 在网页开发中，图片延迟加载（Lazy Loading）是一种优化技术，特别适用于拥有大量图片的页面。这种方法可以显著提高页面加载速度，因为它仅加载用户实际看到的图片，而不是一次性加载所有图片。这减轻了服务器负担，提升了用户体验。本文将介绍三种JavaScript实现图片延迟加载的方法。 ### 方法一：原生JavaScript 在第一种方法中，我们可以使用原生JavaScript来监听滚动事件，并判断图片是否进入视口。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>懒加载图片示例</title> </head> <body>  <img class="lazy" src="images/sprite.gif" data-src="actual-image.jpg"> <script> function lazyLoad() { var lazyImages = document.getElementsByClassName('lazy'); for (var i = 0; i < lazyImages.length; i++) { if (isElementInViewport(lazyImages[i])) { lazyImages[i].src = lazyImages[i].dataset.src; lazyImages[i].classList.remove('lazy'); } } } function isElementInViewport(element) { var rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } window.addEventListener('scroll', lazyLoad); // 首次加载时也执行一次 lazyLoad(); </script> </body> </html> ``` 在这个例子中，图片的原始源被设置为一个占位符（如`sprite.gif`），然后通过`data-src`属性保存实际的图片源。当图片进入视口时，`lazyLoad`函数会检查图片是否可见，如果是，则更新`src`属性并移除`lazy`类，以便实际图片开始加载。 ### 方法二：使用Intersection Observer API Intersection Observer API 是现代浏览器提供的一个新特性，用于观察元素是否进入或离开视口。使用这个API可以更高效地处理延迟加载： ```javascript let observer = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); let lazyImages = document.querySelectorAll('.lazy'); lazyImages.forEach(function(img) { observer.observe(img); }); ``` 在这个例子中，我们创建了一个Intersection Observer实例，当图片进入视口时，它会触发回调函数，更新图片的`src`属性，并停止观察该元素，避免重复加载。 ### 方法三：利用jQuery库如果你的项目中已经引入了jQuery，可以利用其提供的便利功能来实现延迟加载： ```javascript $(document).ready(function() { $('.lazy').each(function() { $(this).one('load', function() { this.style.opacity = 1; }).attr('src', this.getAttribute('data-src')); }); }); $(window).scroll(function() { lazyLoad(jQuery); }); function lazyLoad($) { $('img.lazy:hidden').slice(0, 30).each(function() { var $img = $(this); var imgSrc = $img.data('src'); $img.attr('src', imgSrc).removeClass('lazy'); }); } ``` 这里，我们首先在文档加载完成后替换图片的`data-src`为`src`，然后在滚动事件中，每次加载30张隐藏的图片。总结起来，JavaScript实现图片延迟加载有多种策略，可以根据项目需求和浏览器兼容性选择合适的方法。这些技术不仅提高了网页性能，还提供了更好的用户体验，特别是在移动设备上，有限的网络带宽和电池寿命使得延迟加载变得尤为重要。

javascript实现图片延迟加载方法汇总实现图片延迟加载方法汇总(三种方法三种方法)

看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打

开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案

是比较好的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处

在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器

向用户浏览器发送图片文件所产生的负荷，下面通过三种方法给大家介绍js实现图片延时加载。

js实现图片延迟加载方法一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>lazyImage2.html</title>

</head>

var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）

window.onscroll = function() {

var imgElements = document.getElementsByTagName("img");

var lazyImgArr = new Array();

var j = 0;

for(var i=0; i<imgElements.length; i++) {

if(imgElements[i].className == "lazy"){

lazyImgArr[j++] = imgElements[i];

}

var scrollHeight = document.body.scrollTop;//滚动的高度

var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度

if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。

for(var k=0; k<lazyImgArr.length; k++) {

var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标）

if((imgTop - scrollHeight) <= bodyHeight) {

lazyImgArr[k].src = lazyImgArr[k].alt;

lazyImgArr[k].className = "notlazy"

}

temp = scrollHeight;

}

};

// --></script>

</body>

</html>

js实现网页图片延时加载方法二：

再没贴代码之前先给大家讲下js实现图片延时加载的原理。

实现原理：

把所有需要延时加载的图片改成如下的格式：

然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top，然后把延时加载的图

片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）：

JS代码：代码：

lazyLoad = (function() {

var map_element = {};

var element_obj = [];

var download_count = 0;

var last_offset = -1;

var doc_body;

var doc_element;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38737635

粉丝: 5
资源: 917

JavaScript实现图片延迟加载：三种方法详解

JavaScript简单实现鼠标移动切换图片的方法

JavaScript和CSS交互的方法汇总

JavaScript 实现图片延迟加载的三种方法详解

javascript实现跨域的方法汇总

javascript函数自动执行常用方法汇总

rollup-plugin-hoist-import-deps:一个汇总插件，可以加快延迟加载

动态加载js的方法汇总

javascript如何实现360度全景照片问题汇总

js跳转页面方法实现汇总

JavaScript提高性能知识点汇总

最新资源