图片懒加载与预加载结合可显著提升网页性能。1. 懒加载通过 Intersection Observer API 延迟加载视窗外图片，减少初始请求；2. 预加载在空闲或用户操作前提前加载关键资源；3. 首屏直接加载、非首屏懒加载并配合占位图与尺寸设置优化体验。
图片的懒加载和预加载是提升网页性能的关键手段。懒加载延迟加载视窗外的图片，减少初始资源请求；预加载则提前加载重要资源，提升后续体验。两者结合使用，能有效优化页面加载速度与用户体验。
图片懒加载：按需加载可视区域内的图片
懒加载的核心思想是：只有当图片即将进入或已进入用户视口时，才开始加载其真实图片资源，避免一次性加载大量隐藏图片造成性能浪费。
实现方式通常依赖 Intersection Observer API，它比传统的 scroll 事件监听更高效、性能更好。
示例代码（懒加载）：
给 img 标签设置一个占位属性，比如 data-src 存放真实图片地址，src 指向一个极小的占位图或空白。
@@##@@
JavaScript 实现观察并加载：
立即学习“Java免费学习笔记（深入）”；
document.addEventListener("DOMContentLoaded", function () { const lazyImages = document.querySelectorAll(".lazy"); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.dataset.src; if (src) { img.src = src; img.classList.remove("lazy"); } observer.unobserve(img); } }); }); lazyImages.forEach(img => { imageObserver.observe(img); });});
说明：
使用 data-src 存储真实图片路径 IntersectionObserver 监听元素是否进入视口 一旦进入，替换 src 并停止观察，避免重复触发
图片预加载：提前加载关键资源
预加载适用于那些用户大概率会访问的内容，比如轮播图的下一张、文章末尾的重要配图等。通过提前加载，减少等待时间，提升流畅度。
示例代码（预加载单张图片）：
function preloadImage(src) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error(`Failed to load image: ${src}`)); img.src = src; });}// 使用preloadImage('/path/to/important-image.jpg') .then(img => console.log('预加载完成:', img)) .catch(err => console.error(err));
批量预加载多张图片：
function preloadImages(sources) { const promises = sources.map(src => preloadImage(src)); return Promise.all(promises);}// 调用preloadImages([ '/img/slide1.jpg', '/img/slide2.jpg', '/img/banner.jpg']).then(() => { console.log('所有关键图片已预加载');});
建议时机：
页面空闲时（可结合 requestIdleCallback） 用户操作前（如点击“下一页”前预加载下几页资源） 网络状态良好时优先执行
实际应用中的优化建议
结合懒加载与预加载，可以设计更智能的图片加载策略：
首屏图片不懒加载，直接正常加载以保证快速呈现 非首屏图片使用懒加载，配合 Intersection Observer 在用户浏览接近某区域前，预加载该区域图片（例如滚动到某位置时触发预加载） 使用低分辨率占位图（blurry placeholder）提升感知性能 为懒加载图片设置宽高，防止布局偏移（CLS 优化）
注意兼容性：
IntersectionObserver 在较老浏览器中不支持，可引入 polyfill 或降级使用 scroll + getBoundingClientRect 判断。
基本上就这些。合理运用懒加载与预加载，既能减轻服务器压力，又能显著提升用户体验，是前端性能优化中性价比极高的实践。
以上就是使用JavaScript实现图片懒加载与预加载_js性能优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538747.html
微信扫一扫 
支付宝扫一扫 
