图片预加载和懒加载
cnblogs 2024-07-31 08:11:00 阅读 59
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
图片预加载和图片懒加载是网页优化的两种常见技术,它们可以提升用户体验并改善网页性能。
图片预加载(Image Preloading):
图片预加载是指在页面加载时提前加载图片,使其缓存在浏览器中,当用户需要查看这些图片时,可以立即显示,而不需要等待加载。这样可以提高用户的访问体验,尤其是对于包含大量图片的网站。
实现方法:
- <li>使用 JavaScript 预加载图片:
var image = new Image();
image.src = 'image.jpg';
- 使用 CSS 预加载图片:
.preloaded-image {
background-image: url('image.jpg');
}
- 通过 HTML 预加载图片:
<link rel="preload" href="image.jpg" as="image">
图片懒加载(Lazy Loading):
图片懒加载是指延迟加载图片,直到用户滚动到页面上的特定位置时才加载图片。这样可以减少页面加载时间,并且节省带宽,特别是对于长页面或包含大量图片的页面来说,可以显著提升性能。
实现方法:
- <li>
使用 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');
};
}
});
});
- 使用 Intersection Observer 实现图片懒加载:
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);
});
在这两种实现方式中,图片懒加载会在用户滚动页面时自动加载图片,而不会一次性加载所有图片,从而提高页面加载速度和性能。
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。