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

图片预加载

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

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 imgs1 = document.querySelectorAll('img');
for (let i = 0; i < len; i++) {let imgObj = new Image(); imgObj.src = imgs[i];imgObj.addEventListener('load', function () { imgs1[i].src = imgObj.src;}, false);
}

图片懒加载

原理：优先加载可视区域的图片，等图片进入了可视区域再进行加载，提高用户体验和性能

// 初始加载window.onload = function() {var imgs = document.querySelectorAll('img');let imgContainer = document.querySelector('.img-container');function load() {// 在某个容器中的懒加载实现let innerHeight = parseInt(window.getComputedStyle(imgContainer).height);let scrollTop = imgContainer.scrollTop;let offsetTop = imgContainer.offsetTop;// 注释部分为在整个页面中的懒加载实现// let innerHeight = window.innerHeight; 页面可视区域的高度// const scrollTop = document.documentElement.scrollTop || document.body.scrollTop 滚动条距离顶部的高度for(let i=0; i<imgs.length;i++) {// 可视区域高度+滚动高度 > 当前图片距离顶部的距离时，说明到达了可视区域，此时应该加载图片//    if(innerHeight+scrollTop > imgs[i].offsetTop)if (innerHeight+scrollTop > imgs[i].offsetTop - offsetTop) {let tags = new Image();tags.src = imgs[i].getAttribute('data-src');tags.onload = function() {imgs[i].src = tags.src;}}}}load(imgs)window.addEventListener('scroll', function() {load(imgs);})}

vue-lazyload 懒加载插件

npm install vue-lazyload --save 安装插件

在main.js里面 import { VLazyImagePlugin } from ‘v-lazy-image’;

vue组件中
<v-lazy-image :src="quarterSrc" alt="" @error.native="onError"/>

懒加载和预加载区别：两者行为是相反的，预加载为提前加载，而懒加载为迟缓甚至不加载，懒加载对服务前端有一定的缓解压力的作用，预加载回增加服务器前端压力

使用雪碧图

使用csssprite或者svgsprite

原理：将多张小图片合成一张大图片，然后使用background-position来指定显示哪张图片，在实际项目中，我们经常借助打包工具加载第三方插件来实现这个功能，可以参考：vue使用svg-sprite-loader实现svgsprite

改变图片大小

图片裁剪裁剪多余空白，以此来减小图片大小
图片压缩
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验使用base64格式图片

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

本地html图片载入很慢,打开网页时图片加载很慢怎么办？网页图片打开慢的解决方法...
打开网页里的图片很慢怎么办,电脑打开带图片的网页速度很慢的原因有网速的原因也有电脑配置和软件设置的因素. 电脑打开带图片的网页速度很慢是什么原因清理影响网页打开速度的因素 cookies,开始-控制 ...
右下角android sdk content loader 加载很慢的解决方法
eclipse 每次启动会出现这样的情况右下角的Android SDK Content Loader:一直是 0%不变一直卡. 这样导致无法正常开发很烦人的 1 方法一:删掉 .android目 ...
queueing 优化_简单聊聊网页的资源加载优化
移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的 ...
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？
一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载? 1.使用 Sprites 图片技术它将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用 CSS 技术展现出来.这样一来, ...
网页怎么预先加载模型_修补预先训练的语言模型
网页怎么预先加载模型 Can you fill in the words that I've removed from a recent announcement? 您能填写我从最近的公告中删除的词吗 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
网页怎么预先加载模型_使用预先训练的模型进行转移学习
网页怎么预先加载模型深度学习 (Deep Learning) 什么是转学? (What is Transfer Learning?) Transfer learning is a research ...
某个网站（比如CSDN、GitHub）突然打开、加载很慢，有些途径访问正常、其他网站访问正常，可尝试指定域名服务器的IP地址，不走DNS查询。
摘要若在电脑上访问某个网站比如CSDN主页(CSDN - 专业开发者社区).GitHub主页(GitHub: Let's build from here · GitHub),通过WIFI或者网线访问 ...
Android - 下载别人的android demo 运行的时候加载很久问题处理
一般从git 下载别人的demo 的时候每次都要加载很久,下载gradle 版本之类的, 处理方法把 gradle 下面的 gradle-wrapper 里面的distributionUrl 替换自己 ...
数据加载很慢_Vaex真香！几秒钟就能处理数十亿行数据，比Pandas、Dask更好用
Python中的大数据分析正在复兴.这一切都是从NumPy开始的,它也是我在本文中介绍的工具背后的构建块之一. 2006年,大数据这个话题逐渐受到关注,尤其是随着Hadoop的发布. Pandas因为 ...