微信公众平台内做网站,定制手机网站建设,wordpress获取别名,上海网页设计高端定制懒加载图像是一种优化网页性能的技术#xff0c;它将页面中的图像延迟加载#xff0c;即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页#xff0c;特别是那些包含长页面或大量媒体内容的网站。
好处
**1. 加快页面加载速度#xff1a…懒加载图像是一种优化网页性能的技术它将页面中的图像延迟加载即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页特别是那些包含长页面或大量媒体内容的网站。
好处
**1. 加快页面加载速度**懒加载允许浏览器在初次渲染页面时不必加载所有图像而只加载用户正在浏览或者即将浏览的部分。这减少了初始页面加载所需的时间提高了页面的整体加载速度。 **2. 节省带宽和服务器资源**延迟加载意味着不会同时请求所有图像资源特别是对于长页面或包含大量图像的页面这可以显著减少服务器的负载和带宽消耗。 **3. 改善用户体验**用户在滚动页面时只有那些即将进入视窗的图像才会被加载这降低了页面的初次加载时间使用户能更快速地浏览内容提升了用户的整体体验。 **4. 降低跳出率**快速加载页面和减少等待时间可以降低用户的跳出率增加页面的停留时间有助于提高页面的SEO排名和转化率。
如何实现
图像元素标签的src属性设置为占位符或者空字符串例如data-src属性来存储实际图像的URL。
实例展示
● src中存储一个模糊的内存非常小的图片而data-src中存储的是真实的图片
● 我们需要做的是通过交叉观察点的方式来懒加载图片当图片相交时替换src并去除相应的模糊CSS ● 首先我们获取我们想要的HTML元素存储到变量中
const imgTargets document.querySelectorAll(img[data-src]);● 接着将我们观察点的条件和触发相交时候要做的事情的框架写出来
const loadImg function (entries, observer) {};const imgObserver new IntersectionObserver(loadImg, {root: null,threshold: 0,
});● 使用Intersection Observer API观察图像元素的进入视窗情况并在需要时加载它们。
imgTargets.forEach(img imgObserver.observe(img));● 接着我们需要写当图片进入窗口后我们要做的一系列的事情
const loadImg function (entries, observer) {const [entry] entries;if (!entry.isIntersecting) return;//替换srcentry.target.src entry.target.dataset.src;entry.target.addEventListener(load, function () {entry.target.classList.remove(lazy-img);})observer.unobserve(entry.target);
};注意将entry.target.classList.remove(‘lazy-img’);放入事件处理程序中的原因是 1. 确保图像加载完成 在懒加载的情况下图像的实际加载是延迟的直到它进入视窗并且浏览器开始加载它。如果直接在 loadImg 函数中执行移除类操作可能会在图像加载之前移除 lazy-img 类导致 CSS 动画或其他样式效果不能正常显示。 2. 避免未加载完成时的问题 如果 classList.remove(‘lazy-img’) 在图像加载之前执行那么此时浏览器可能尚未设置好图像的 src 属性也可能导致 CSS 动画或样式应用不正确因为此时图像可能仍处于加载中状态或者尚未开始加载。 3. 确保顺序正确性 将移除类操作放在 load 事件处理程序中可以确保在图像加载完成后立即移除 lazy-img 类。这样可以保证在图像展示给用户之前所有必要的加载和处理步骤都已完成从而确保用户体验的连贯性和视觉效果的正确性。
如果直接entry.target.classList.remove(‘lazy-img’);直接输出的话用户网络缓慢的话会导致图片可能从模糊到清晰的事件很长
● 除此之外为了不让用户感知我们图片的处理过程我们可以加载边距让没有滑动到图片之前按我们已经完成了图片的懒加载过程
const imgObserver new IntersectionObserver(loadImg, {root: null,threshold: 0,rootMargin: 200px,
});完整代码如下
//懒加载图像
const imgTargets document.querySelectorAll(img[data-src]);const loadImg function (entries, observer) {const [entry] entries;if (!entry.isIntersecting) return;//替换srcentry.target.src entry.target.dataset.src;entry.target.addEventListener(load, function () {entry.target.classList.remove(lazy-img);})observer.unobserve(entry.target);
};const imgObserver new IntersectionObserver(loadImg, {root: null,threshold: 0,rootMargin: 200px,
});imgTargets.forEach(img imgObserver.observe(img));
