js实现延迟加载的方法

JS实现延迟加载的方法主要有以下几种：

1. 首屏图片懒加载

这种方式是最常用的，也最容易实现的。当用户滚动屏幕，离开屏幕可视区域一定距离之后再去加载图片，可以减少页面首次加载的时间，提升用户体验。

代码示例：

// 获取所有需要懒加载的图片（使用自定义属性 data-lazyload）
var lazyloadImages = document.querySelectorAll("[data-lazyload]");

// 判定是否露出屏幕底部
function elementIsVisible(el) {
  var top = el.getBoundingClientRect().top + window.pageYOffset;
  return top <= (window.innerHeight + window.pageYOffset);
}

// 加载图片
function loadImage(el) {
  el.setAttribute("src", el.getAttribute("data-lazyload"));
  el.removeAttribute("data-lazyload");
}

// 遍历所有图片
function lazyload() {
  for (var i = 0; i < lazyloadImages.length; i++) {
    if (elementIsVisible(lazyloadImages[i])) {
      loadImage(lazyloadImages[i]);
    }
  }
}

// 监听窗口滚动事件
window.addEventListener("scroll", lazyload);

2. 非首屏图片懒加载

当页面中的某些图片非常大且数量较多时，可以使用这种方式，只在用户需要访问时才进行加载。这样可以减少页面初次加载时间，提高用户体验。

代码示例：

// 获取所有需要懒加载的图片（使用自定义属性 data-src）
var lazyloadImages = document.querySelectorAll("[data-src]");

// 判定是否露出屏幕底部
function elementIsVisible(el) {
  var top = el.getBoundingClientRect().top + window.pageYOffset; 
  var bottom = top + el.offsetHeight;
  return top <= window.innerHeight && bottom >= 0; 
}

// 遍历所有图片
function lazyload() {
  for (var i = 0; i < lazyloadImages.length; i++) {
    if (elementIsVisible(lazyloadImages[i])) {
      lazyloadImages[i].setAttribute("src", lazyloadImages[i].getAttribute("data-src"));
      lazyloadImages[i].removeAttribute("data-src");
    }
  }
}

// 监听窗口滚动事件
window.addEventListener("scroll", lazyload);

以上就是JS实现延迟加载的方法的详细攻略，具体可以根据需要进行代码修改，以适应自己的网站需求。