图片预加载和懒加载

图片预加载和图片懒加载是网页优化的两种常见技术，它们可以提升用户体验并改善网页性能。

图片预加载（Image Preloading）：

图片预加载是指在页面加载时提前加载图片，使其缓存在浏览器中，当用户需要查看这些图片时，可以立即显示，而不需要等待加载。这样可以提高用户的访问体验，尤其是对于包含大量图片的网站。

实现方法：

1. 使用 JavaScript 预加载图片：

   javascript

   代码解读

   复制代码

   var image = new Image(); image.src = 'image.jpg';

2. 使用 CSS 预加载图片：

   css

   代码解读

   复制代码

   .preloaded-image { background-image: url('image.jpg'); }

3. 通过 HTML 预加载图片：

   html

   代码解读

   复制代码

   <link rel="preload" href="image.jpg" as="image">

图片懒加载（Lazy Loading）：

图片懒加载是指延迟加载图片，直到用户滚动到页面上的特定位置时才加载图片。这样可以减少页面加载时间，并且节省带宽，特别是对于长页面或包含大量图片的页面来说，可以显著提升性能。

实现方法：

1. 使用 JavaScript 实现图片懒加载：

   javascript

   代码解读

   复制代码

   document.addEventListener("DOMContentLoaded", function() { var lazyImages = document.querySelectorAll("img.lazy"); lazyImages.forEach(function(img) { if (img.getBoundingClientRect().top < window.innerHeight) { img.src = img.dataset.src; img.onload = function() { img.classList.remove('lazy'); }; } }); });

2. 使用 Intersection Observer 实现图片懒加载：

   javascript

   代码解读

   复制代码

   var lazyImages = document.querySelectorAll('img.lazy'); var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var img = entry.target; img.src = img.dataset.src; img.onload = function() { img.classList.remove('lazy'); }; observer.unobserve(img); } }); }); lazyImages.forEach(function(img) { observer.observe(img); });

在这两种实现方式中，图片懒加载会在用户滚动页面时自动加载图片，而不会一次性加载所有图片，从而提高页面加载速度和性能。