海宁市建设局官方网站6,APP编辑WordPress,wordpress文章备份插件,手机流畅优化软件前言 在说到对图片资源进行优化时#xff0c;那就不得不提到图片预加载和图片懒加载#xff0c;可能很多朋友都了解这两者#xff0c;但是一直没有很清晰的概念#xff0c;以及什么时候用#xff0c;用在什么场景下#xff0c;今天就来详细的了解一下吧#xff01; 图…前言 在说到对图片资源进行优化时那就不得不提到图片预加载和图片懒加载可能很多朋友都了解这两者但是一直没有很清晰的概念以及什么时候用用在什么场景下今天就来详细的了解一下吧 图片预加载 图片预加载是指在页面加载时提前加载页面中需要使用的图片资源将它们缓存在浏览器中。 这样当用户需要查看这些图片时就可以直接从缓存中获取,减少等待时间,提升用户体验。 以下是一个简单的栗子 function preloadImages(urls, allImagesLoadedCallback) {const imgs [];const loadedCounter [];urls.forEach((url, i) {imgs[i] new Image();// 处理加载计数器imgs[i].onload imgs[i].onerror () {if (loadedCounter.length urls.length) {allImagesLoadedCallback();}};imgs[i].src url;}); }preloadImages([https://example.com/image1.png,https://example.com/image2.png,https://example.com/image3.png ], () {console.log(All images have been preloaded); }); 预加载图片通过 JS 创建 Image 对象设置其 src 属性为要预加载的图片URL浏览器会自动下载这些图片资源并缓存在本地。 从缓存获取图片当页面需要展示这些预加载的图片时,浏览器可以直接从本地磁盘缓存中读取图片数据不需要再次向服务器发起请求下载图片。 从缓存中获取图片数据比从远程服务器下载要快得多因为: 无需再次建立网络连接无需等待服务器响应无需传输数据的延迟 图片懒加载 图片懒加载是一种在页面滚动到图片位置时才加载图片的技术。这样可以减少页面初始加载时的数据量加快页面加载速度。当用户滚动到图片位置时再动态加载并显示图片。 使用Intersection Observer API这是一个原生浏览器API用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素进入视口时可以触发回调函数来加载图片。 参考文档 IntersectionObserver - Web API 接口参考 | MDN (mozilla.org) 一个简单的实例 const images document.querySelectorAll(img[data-src]); const observer new IntersectionObserver((entries, observer) { entries.forEach(entry { if (entry.isIntersecting) { const img entry.target; const src img.dataset.src; img.src src; img.classList.remove(lazy); observer.unobserve(img); } }); }); images.forEach(image { observer.observe(image); }); 我们为所有带有data-src属性的图片元素设置了一个Intersection Observer。当图片进入视口时我们从data-src属性中获取实际的图片URL并将其设置为图片的src属性从而触发图片的加载。 应用场景 图片预加载应用场景: 需要快速显示的关键图片对于一些需要尽快展示的关键图片如电商网站的产品主图、新闻门户网站的头版头条图片等可以使用预加载技术确保这些图片能够快速显示出来提升首屏体验。幻灯片、图片画廊等在包含幻灯片或图片画廊的页面中可以预加载相关的一些图片使得用户切换时下一张图片已经就绪,可以无延迟显示。游戏等富媒体应用游戏或者富媒体应用往往需要加载大量图片资源可以在加载界面预加载部分关键资源缩短真正进入应用的等待时间。小型网站或单页面应用对于页面数量较少、图片资源有限的小型网站或单页面应用直接预加载所有图片也是可行的方便后续无延迟加载。 图片懒加载应用场景: 图文内容丰富的页面一些包含大量图文内容的页面如新闻资讯、博客等,初始加载所有图片会拖慢页面速度。此时可使用懒加载,仅加载首屏图片其他图片滚动到视口时再加载。长列表或图库页面电商详情、图片社交等页面往往包含大量图片列表如果全部预加载会影响加载性能。使用懒加载可以只加载当前视口内的图片提高加载速度。移动端页面移动端的网络环境往往不如桌面端稳定也更加重视首屏加载速度。使用懒加载图片可以减少移动端首屏数据传输量提升加载体验。无限滚动的页面对于无限滚动加载数据的页面不可能一次性加载所有图片此时必须采用懒加载策略。