前端图片看到再加载的关键在于：懒加载（Lazy Loading）、使用Intersection Observer API、优化网络请求。懒加载是一种优化网页性能的方法，图片只有在用户即将滚动到它们时才进行加载。使用Intersection Observer API是实现懒加载的现代方法，它能够高效地检测元素的可见性并触发加载动作。优化网络请求则包括缩小图片尺寸、使用适当的图片格式，以及采用CDN等技术来加速图片的加载。接下来，我们将详细介绍这些方法及其实现技巧。
一、懒加载（Lazy Loading）
懒加载是一种延迟加载图片的技术，只有当图片进入视窗时才进行加载，从而减少初始页面加载时间，提升用户体验。
1、懒加载的基本原理
懒加载的基本原理是将图片的实际URL存储在自定义属性中，例如data-src，而不是直接在src属性中。然后，通过JavaScript检测图片是否进入视窗，当图片进入视窗时，再将data-src的值赋给src属性，从而触发图片加载。
2、实现懒加载的代码示例
以下是一个简单的懒加载实现示例：
<img data-src="example.jpg" alt="example image" class="lazy">
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
function lazyLoad() {
lazyImages.forEach(function(lazyImage) {
if (lazyImage.getBoundingClientRect().top < window.innerHeight && lazyImage.getBoundingClientRect().bottom > 0) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
</script>
在这个示例中，IntersectionObserver用于检测图片是否进入视窗，并在进入视窗时加载图片。如果浏览器不支持IntersectionObserver，则使用滚动事件作为后备方案。
二、使用Intersection Observer API
Intersection Observer API是一种异步观察目标元素与其祖先元素或顶级文档视窗的交集状态变化的技术，可以高效地实现懒加载。
1、Intersection Observer API的基本用法
Intersection Observer API通过创建一个IntersectionObserver实例，并定义回调函数来处理观察到的变化。然后，使用observe方法开始观察目标元素。
2、Intersection Observer API实现懒加载示例
以下是一个使用Intersection Observer API实现懒加载的示例：
<img data-src="example.jpg" alt="example image" class="lazy">
<script>
document.addEventListener("DOMContentLoaded", function() {
let options = {
root: null, // 默认是视窗
rootMargin: "0px",
threshold: 0.1 // 目标元素进入视窗10%时触发回调
};
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
observer.unobserve(lazyImage);
}
});
}, options);
let lazyImages = document.querySelectorAll("img.lazy");
lazyImages.forEach(function(lazyImage) {
observer.observe(lazyImage);
});
});
</script>
在这个示例中，使用IntersectionObserver来观察图片元素，当图片进入视窗10%时，触发回调函数加载图片。
三、优化网络请求
优化网络请求不仅能够加速图片加载，还能减少带宽消耗，提高用户体验。
1、缩小图片尺寸
缩小图片尺寸是优化图片加载的首要步骤，可以通过压缩图片文件来实现。使用工具如ImageOptim、TinyPNG等，可以在保持图片质量的同时大幅减少文件大小。
2、使用适当的图片格式
选择合适的图片格式能够进一步优化加载速度。常见的图片格式有JPEG、PNG和WebP。JPEG适用于照片类图片，PNG适用于图标和需要透明背景的图片，WebP则是兼具高压缩率和高质量的格式。
3、采用内容分发网络（CDN）
使用CDN可以将图片分发到全球多个节点，用户可以从离自己最近的节点获取图片，从而加快加载速度。常见的CDN服务提供商有Cloudflare、Akamai等。
4、使用图像懒加载库
除了手动实现懒加载，使用现成的图像懒加载库也是一种有效的方法。这些库通常已经经过优化，能够更高效地实现懒加载功能。
常见的懒加载库有：
- lazysizes：一个高性能的懒加载库，支持各种媒体类型（图片、iframe等）。
- lozad.js：一个轻量级的懒加载库，支持图片、视频等多种媒体类型。
以下是使用lazysizes库的示例：
<img data-src="example.jpg" alt="example image" class="lazyload">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js" async></script>
只需在图片元素中添加data-src属性，并添加lazyload类，然后引入lazysizes库即可实现懒加载功能。
四、SEO与懒加载的关系
虽然懒加载能够提升用户体验，但在SEO方面也需要注意一些问题。搜索引擎爬虫可能无法执行JavaScript，从而导致懒加载的图片无法被索引。
1、使用noscript标签
为了确保搜索引擎能够索引懒加载的图片，可以使用<noscript>标签提供图片的后备方案。
<img data-src="example.jpg" alt="example image" class="lazyload">
<noscript>
<img src="example.jpg" alt="example image">
</noscript>
2、服务端渲染与静态生成
使用服务端渲染（SSR）或静态生成（SSG）技术也可以解决懒加载对SEO的影响。这些技术能够在服务端生成完整的HTML内容，使得搜索引擎可以直接抓取图片。
常见的SSR框架有Next.js、Nuxt.js等，使用这些框架可以轻松实现服务端渲染。
五、浏览器兼容性与懒加载
不同浏览器对懒加载的支持程度不同，因此需要考虑浏览器兼容性问题。
1、现代浏览器支持
大多数现代浏览器都支持Intersection Observer API，可以通过特性检测来使用该API实现懒加载。
2、后备方案
对于不支持Intersection Observer API的浏览器，可以使用滚动事件和getBoundingClientRect方法作为后备方案，以确保懒加载功能在所有浏览器中都能正常工作。
六、懒加载在移动端的应用
移动端设备通常带宽有限，性能较低，因此懒加载在移动端的应用尤为重要。
1、优化移动端图片加载
在移动端，可以通过使用适当尺寸的图片、选择合适的图片格式、压缩图片文件等方法来优化加载速度。
2、响应式图片
使用srcset和sizes属性可以实现响应式图片，根据设备的屏幕尺寸和分辨率加载不同尺寸的图片，从而提升加载性能。
<img
src="small.jpg"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w"
sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 1800px"
alt="example image"
class="lazyload">
七、懒加载与用户交互
懒加载不仅可以用于图片，还可以用于其他需要延迟加载的内容，如视频、iframe等。
1、视频懒加载
对于视频，可以使用懒加载技术延迟加载视频资源，只有在用户即将观看视频时才进行加载，从而减少初始加载时间。
2、iframe懒加载
对于嵌入的iframe内容，如地图、第三方小工具等，可以使用懒加载技术延迟加载iframe，提升页面加载性能。
<iframe data-src="https://example.com" class="lazyload"></iframe>
<script>
document.addEventListener("DOMContentLoaded", function() {
let lazyIframes = [].slice.call(document.querySelectorAll("iframe.lazyload"));
if ("IntersectionObserver" in window) {
let lazyIframeObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyIframe = entry.target;
lazyIframe.src = lazyIframe.dataset.src;
lazyIframe.classList.remove("lazyload");
lazyIframeObserver.unobserve(lazyIframe);
}
});
});
lazyIframes.forEach(function(lazyIframe) {
lazyIframeObserver.observe(lazyIframe);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
function lazyLoad() {
lazyIframes.forEach(function(lazyIframe) {
if (lazyIframe.getBoundingClientRect().top < window.innerHeight && lazyIframe.getBoundingClientRect().bottom > 0) {
lazyIframe.src = lazyIframe.dataset.src;
lazyIframe.classList.remove("lazyload");
lazyIframes = lazyIframes.filter(function(iframe) {
return iframe !== lazyIframe;
});
if (lazyIframes.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
}
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
</script>
通过以上方法，可以有效地优化前端图片和其他资源的加载，提高网页性能和用户体验。
相关问答FAQs：
1. 前端如何实现图片的懒加载？
懒加载是一种优化网页性能的技术，它可以延迟加载页面中的图片，只有当用户滚动到图片所在区域时才加载图片。实现懒加载可以通过监听滚动事件，判断图片是否进入可视区域，然后动态创建img标签，将图片的src属性设置为真实的图片链接。
2. 如何在前端实现图片的预加载？
图片预加载是指在页面加载完成之前提前加载图片资源，以提高用户体验。在前端开发中，可以通过创建一个隐藏的img标签，将需要预加载的图片链接设置为img标签的src属性，这样浏览器会提前加载这些图片，当需要显示时可以立即渲染。
3. 前端如何实现图片的延迟加载？
延迟加载是指在页面加载完成后，再加载页面中的图片。实现延迟加载可以通过在img标签的src属性中设置一个占位符，当页面加载完成后，再使用JavaScript动态将占位符替换为真实的图片链接，这样可以减少页面加载时间，提高用户的加载体验。
原创文章，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/2220988
