网页中有大量图片加载很慢，用什么方法进行优化

最新推荐文章于 2024-09-10 23:19:40 发布

web夏目贵志

最新推荐文章于 2024-09-10 23:19:40 发布

阅读量7.6k

点赞数 2

分类专栏： web前端文章标签：图片懒加载图片预加载

本文链接：https://blog.csdn.net/weixin_43961899/article/details/123051155

版权

本文探讨了如何优化网页中的图片加载速度，包括图片预加载以提升用户体验，图片懒加载以减少不必要的资源消耗，使用vue-lazyload插件实现懒加载，以及通过雪碧图和调整图片大小来优化。预加载在页面加载前加载图片，懒加载则仅加载视口内的图片，减轻服务器压力。同时，介绍了结合csssprite或svgsprite的雪碧图技术，以及图片裁剪和压缩方法。

摘要由CSDN通过智能技术生成

图片预加载

原理：在网页全部加载之前，提前加载图片，当用户需要查看图片时，可以从本地缓存中直接渲染，提供用户更好的体验，减少等待时间。

const imgs = [
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
    "https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg",
    "https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg",
];
let len = imgs.length;
var