js实现img图片懒加载

在前端中,可以使用 JavaScript 来实现图片的懒加载。下面是一种常见的实现方式:

  1. 在 HTML 文件中,将需要懒加载的图片的 src 属性替换为一个占位符,例如使用一个透明的空白图片或者是一个包含背景色的 div。
  2. 给这些图片添加一个自定义的属性,例如 data-src,并将真实的图片路径作为该属性的值,例如<img data-src="path/to/real/image.jpg">
  3. 使用 JavaScript 监听滚动事件,并检查图片是否进入了可见区域。
  4. 当图片进入可见区域时,将 data-src 属性的值赋给 src 属性,从而触发图片加载。

下面是一个简单的示例代码:

html 复制代码
<!-- HTML -->
<img data-src="path/to/real/image.jpg" class="lazy-load">
javascript 复制代码
// JavaScript
window.addEventListener('DOMContentLoaded', function() {
  var lazyImages = document.querySelectorAll('.lazy-load');
  
  function lazyLoad() {
    lazyImages.forEach(function(img) {
    	let r = img.getBoundingClientRect().top <= window.innerHeight;
    	let u = img.getBoundingClientRect().bottom >= 0 ;
    	let t = getComputedStyle(img).display !== 'none';
      if ( r && u && t ) {
        img.src = img.getAttribute('data-src');
        img.classList.remove('lazy-load');
      }
    });
  }
  
  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationchange', lazyLoad);
});

上述代码首先在页面加载完成后获取所有带有 lazy-load 类名的图片。然后,通过监听滚动、窗口调整大小和屏幕旋转等事件,在合适的时机检查图片是否需要加载。 如果图片已经进入可见区域内,就将 data-src 属性的值赋给 src 属性,并移除 lazy-load 类名,触发图片加载。

当然,这只是一个简单的示例代码,实际开发中可能需要处理更多的细节和边界情况。同时,也可以借助第三方的 JavaScript 库来简化懒加载的实现。

相关推荐
Want5952 分钟前
C/C++圣诞树①
c语言·开发语言·c++
生擒小朵拉7 分钟前
STM32添加库函数
java·javascript·stm32
老赵的博客14 分钟前
c++ 杂记
开发语言·c++
jimmy.hua16 分钟前
[C++刷怪笼]:set/map--优质且易操作的容器
开发语言·c++
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
w2sfot1 小时前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴2 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
郝学胜-神的一滴2 小时前
避免使用非const全局变量:C++中的最佳实践 (C++ Core Guidelines)
开发语言·c++·程序人生
搞一搞汽车电子2 小时前
S32K3平台eMIOS 应用说明
开发语言·驱动开发·笔记·单片机·嵌入式硬件·汽车
前端Hardy2 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css