前端图片懒加载的原理与3种实现方式举例

前端图片懒加载原理

前端图片懒加载，顾名思义，就是在页面渲染时，不加载显示在当前视线范围之外的图片，只有当用户滚动页面至该图片可见位置时，才开始加载显示该图片。

这种技术的核心原理就是“赖加载”。通常情况下，页面中的图片是通过img标签将其src属性指向具体的url来加载显示的。而前端图片懒加载，通过修改img标签的src属性来实现图片的动态加载。

具体来说，当用户滚动页面时，通过JavaScript计算图片是否已经进入可视范围。当图片进入可视范围时，JavaScript会将img标签的src属性修改为具体的图片url，然后浏览器会加载并显示图片。这样，就实现了前端图片的懒加载。

3种实现方式举例

Intersection Observer API

Intersection Observer API 是一种在浏览器中实现懒加载的新方式，它可以被用来监听目标元素和其祖先元素或者顶级文档 viewport 的交叉状态(VP:viewport)，从而控制目标元素的加载时机。

const images = document.querySelectorAll('img.lazyload');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.setAttribute('src', img.getAttribute('data-src'));
      observer.unobserve(img);
    }
  });
});

images.forEach((img) => {
  observer.observe(img);
});

jQuery LazyLoad 插件

jQuery LazyLoad 是一款基于 jQuery 的图片懒加载插件，它使用自定义的 HTML5 data 属性控制图片的加载时机。

<img class="lazy" data-original="path/to/img.jpg">

$(function() {
  $('img.lazy').lazyload({
    effect: 'fadeIn' // 动画效果
  });
});

Vue.js 图片懒加载指令

Vue.js 是一款流行的 JavaScript 框架，它提供了指令(directive)这个特性，可以帮助我们控制元素的行为。Vue.js 中图片懒加载可以通过自定义指令的方式实现。

<img v-lazy="path/to/img.jpg">

Vue.directive('lazy', {
  bind: function(el, binding) {
    const lazyImage = new IntersectionObserver((entries) => {if (entries[0].intersectionRatio <= 0) return;el.src = binding.value;lazyImage.unobserve(el);});
  lazyImage.observe(el);
}
});

总结

前端图片懒加载可以让页面加载更流畅，提高用户体验，同时也可以减少不必要的网络请求。本文分别介绍了图片懒加载的原理和三种实现方式，每一种方式都有其适用范围和优缺点。在实际项目中，可以根据实际情况选择合适的方式来实现图片懒加载。