当前位置：首页 > news >正文

南京个人做网站网站建设易网拓

news 2025/9/17 22:49:34

南京个人做网站,网站建设易网拓,电子书网站怎么做,北京市住房和城乡建设厅网站图片性能优化图片懒加载如何判断图片出现在了当前视口 （即如何判断我们能够看到图片）如何控制图片的加载原生实现 <img src"shanyue.jpg" loading"lazy" />loading"lazy" 延迟加载图像，直到它和视…

图片性能优化

图片懒加载

如何判断图片出现在了当前视口（即如何判断我们能够看到图片）
如何控制图片的加载

原生实现

<img src="shanyue.jpg" loading="lazy" />

loading="lazy" 延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。

lazy：对资源进行延迟加载。
eager：立即加载资源。
auto：浏览器自行判断决定是否延迟加载资源。

通过相对计算获取元素位置

图片顶部到文档顶部的距离 > 浏览器可视窗口高度 + 滚动条滚过的高度，此时的图片就是不可见的，如果图片顶部到文档顶部的距离 < 浏览器可视窗口高度 + 滚动条滚过的高度那么该图片就应该出现在可视区域内了。

但你还记得我们前面提到的注意事项吗？如果用户直接滑到页面底部，那么这个判断条件对所有的图片都为真，还是会造成性能问题。所以我们要再加上一条判断条件 图片的高度 + 图片顶部到文档顶部的距离 > 滚动条滚过的高度，以确保图片确实在可视区域内，而不只是被滑过。

待加载图片的高度：img.clientHeight
图片顶部到文档顶部的距离：img.offsetTop
浏览器窗口滚动过的距离：document.documentElement.scrollTop 或 document.body.scrollTop
浏览器可视窗口高度：document.documentElement.clientHeight 或 window.innerHeight

const imgs = document.querySelectorAll('img')
function lazyLoad(imgs) {console.log('lazyLoad')// 浏览器可视窗口的高度const windowHeight = window.innerHeight// 可视窗口滚动过的距离const scrollHeight = document.documentElement.scrollTopfor (let i = 0; i < imgs.length; i++) {if (windowHeight + scrollHeight > imgs[i].offsetTop && imgs[i].clientHeight + imgs[i].offsetTop > document.documentElement.scrollTop && !imgs[i].src) {imgs[i].src = imgs[i].dataset.src}}
}
// 进入页面时执行一次加载
lazyLoad(imgs)
// 监听滚动事件，当滚动到可视区域时加载图片
// 此处可以添加防抖/节流优化 window.onscroll = throttle(lazyLoad, 500)
window.onscroll = function () {lazyLoad(imgs)
}

Element.getBoundingClientRect()

getBoundingClientRect 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

有了这个 API 后我们很同意获取图片的 top 值，当 top 值小于可视区的高度的时候就可以任何图片进入了可视区，直接加载图片即可。

document.addEventListener('DOMContentLoaded', () => {const lazyImages = document.querySelectorAll('img.lazyload')const lazyLoad = () => {lazyImages.forEach((img) => {if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== 'none') {img.src = img.dataset.srcimg.classList.remove('lazyload')}})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)
})

使用 IntersectionObserver

<img data-src="xxx.jpg" class="lazyload" /><script>document.addEventListener('DOMContentLoaded', () => {const lazyImages = document.querySelectorAll('img.lazyload')if ('IntersectionObserver' in window) {const observer = new IntersectionObserver((entries, observer) => {entries.forEach((entry) => {if (entry.isIntersecting) {const image = entry.targetimage.src = image.dataset.srcimg.classList.remove('lazyload')observer.unobserve(image)}})})lazyImages.forEach((img) => {observer.observe(img)})} else {lazyImages.forEach((img) => {img.src = img.dataset.src})}})
</script>

监听元素的重叠度 IntersectionObserver
var observer = new IntersectionObserver(callback[, options]); 
IntersectionObserver 的 disconnect()方法终止对所有目标元素可见性变化的观察。

IntersectionObserver 的 observe() 方法向 IntersectionObserver
对象观察的目标集合添加一个元素。一个观察者有一组阈值和一个根（root），但是可以监视多个目标元素的可见性变化（遵循阈值和根的设置）。

IntersectionObserver 的 takeRecords() 方法返回一个IntersectionObserverEntry 对象数组，每个对象包含目标元素自上次相交检查以来所经历的相交状态变化——可以显式地通过调用此方法或隐式地通过观察器的回调获得。

IntersectionObserver 的 unobserve() 方法命令 IntersectionObserver停止对一个元素的观察。
const ob = new IntersectionObserver( (entries) => {const entry = entries[0]if (entry.isIntersecting) {console.log('加载更多')}  },   {// root 监听元素的祖先元素Element对象，其边界盒将被视作视口。目标在根的可见区域的任何不可见部分都会被视为不可见。root: null,// rootMargin 一个在计算交叉值时添加至根的边界盒 (bounding_box) 中的一组偏移量，类型为字符串 (string) ，可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的margin 属性等同; 可以参考 intersection root 和 root margin 来深入了解 margin 的工作原理及其语法。默认值是"0px 0px 0px 0px"。// threshold 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0，则意味着监听元素即使与根有 1 像素交叉，此元素也会被视为可见。若指定值为
1.0，则意味着整个元素都在可见范围内时才算可见。threshold: 0   })const dom = document.querySelector('.loading') 
ob.observe(dom) 

使用库

lazysizes、lazyload

图片预加载

const images = ['https://picsum.photos/id/237/400/400.jpg?grayscale&blur=2','https://picsum.photos/id/238/400/400.jpg?grayscale&blur=2'
]function preloadImages(max = 3) {const _images = [...images]function loadImage() {const src = _images.shift()return new Promise((resolve, reject) => {const link = document.createElement('link')link.rel = 'preload'link.as = 'image'link.href = srcdocument.head.appendChild(link)link.onload = resolvelink.onerror = rejectsetTimeout(reject, 10000)})}function _loadImage() {loadImage().finally(() => {if (_images.length) {loadImage()}})}for (let i = 0; i < max; i++) {_loadImage()}
}