图盛网站建设,18岁以上准备好纸巾免费网站,甘肃网站域名申请公司,徐州高端模板建站前言
最近做了一个项目是类似于商城的#xff0c;需要放很多图片#xff0c;在用户选择一页五十条时#xff0c;页面加载速度会比较慢。为了提高性能#xff0c;选择用Intersection Observer API 实现图片懒加载。
实现步骤
一、html代码#xff1a;
img class需要放很多图片在用户选择一页五十条时页面加载速度会比较慢。为了提高性能选择用Intersection Observer API 实现图片懒加载。
实现步骤
一、html代码
img classimgCla data-src/assets/img/bigPng1.png alt /这里用“data-src”代替了src用来标记需要使用懒加载的图片后面以便操作
二、css样式
.imgCla {width: 300px;height: 400px;object-fit: cover;//对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等background-color: #f0f0f0;
}
三、js代码
const images document.querySelectorAll(img[data-src]);const options {rootMargin: 0px,threshold: 0.5,};const observer new IntersectionObserver((entries) {entries.forEach((entry) {if (entry.isIntersecting) {const img entry.target;const src img.getAttribute(data-src);img.setAttribute(src, src);img.removeAttribute(data-src);observer.unobserve(img);}});}, options);images.forEach((img) {observer.observe(img);});
注这里是使用 Intersection Observer API 监视图片元素是否进入视口进入视口之后再将data-src改为src
bug描述
原生写法的话按理来说此刻应该可以了但是我写在vue2项目里发现图片加载不出来如下图 检查过代码逻辑没有什么问题之后我写了一个正常的没有懒加载的图片是正常显示的检查了network之后发现了问题 正常显示的图片路径是 http://localhost:9528/static/img/bigPng1.1ca7e5c0.png
因为正常直接加载图片时webpack将图片进行了处理但是使用懒加载的图片没有被打包工具处理
解决步骤
1、调整webpak配置在 chainWebpack 方法中查找到处理 SVG 文件的规则类似地可以添加相应的规则来处理其他类型的图片文件
在vue.config.js的chainWebpack中加入代码
config.module.rule(images).test(/\.(png|jpe?g|gif)(\?.*)?$/).use(url-loader).loader(url-loader).options({limit: 8192, // 如果小于 8kb转换为 base64 格式name: assets/img/[name].[ext], // 图片输出路径和名称配置}).end(); 2、将刚开始的html里面的img标签路径调整一下:
img classimgCla data-srcassets/img/bigPng1.png alt /效果展示
