以下是在谷歌浏览器中使用Lazy Loading减少资源加载时间的方法。
了解Lazy Loading原理
1. 延迟加载概念：Lazy Loading即延迟加载，是一种优化网页性能的技术。在网页初始加载时，只加载视口内（用户可见区域）的资源，对于视口外的图片、视频等资源，暂时不进行加载，等到用户滚动页面，即将这些资源进入视口时，才按需加载它们，这样可以减少网页首次加载时的资源请求，加快加载速度。
2. 浏览器支持情况：谷歌浏览器对Lazy Loading有良好的支持，无论是原生的HTML属性实现，还是通过JavaScript代码实现，都能在谷歌浏览器中有效发挥作用，提升网页性能。
使用HTML属性实现
1. 图片懒加载：对于图片资源，可在图片标签img中添加loading="lazy"属性。例如：。当网页加载时，浏览器会自动识别该属性，只有当图片进入视口时，才会开始下载图片资源，从而减少初始加载时间。
2. iframe懒加载：对于嵌入的iframe框架，也可使用loading="lazy"属性。如：。这样能避免在页面初始加载时，就加载那些暂时不在视口内的iframe内容，提高页面加载效率。
通过JavaScript实现
1. 简单示例代码：对于一些不支持原生懒加载属性的元素，或者需要更个性化的懒加载逻辑，可使用JavaScript实现。以下是一个简单的图片懒加载示例代码：
javascript
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
var active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if (lazyImage.offsetTop < window.pageYOffset + window.innerHeight) {
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);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});

2. 代码说明：首先在图片标签上添加class="lazy"属性，并将图片的真实地址放在data-src属性中，如：。上述JavaScript代码会在页面加载完成后，监听滚动、窗口大小改变和屏幕方向改变等事件，当符合条件的图片进入视口时，将其data-src值赋给src属性，从而实现懒加载。
注意事项
1. 兼容性处理：虽然谷歌浏览器支持Lazy Loading，但不同浏览器的兼容性可能存在差异。在使用JavaScript实现懒加载时，可添加浏览器兼容性检测代码，确保在各种主流浏览器中都能正常工作。
2. 优化资源文件：除了使用Lazy Loading技术，还应优化图片、视频等资源文件的大小和格式，如将图片压缩为合适的尺寸和分辨率，使用WebP等高效格式，这样即使进行懒加载，也能进一步减少资源加载时间。