前端如何解决图片太多加载资源慢的问题

最新推荐文章于 2024-06-22 17:08:13 发布
最新推荐文章于 2024-06-22 17:08:13 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37117408/article/details/121798311
版权

前端开发 图片优化 图片服务器 懒加载 CSS Sprites
关键词由CSDN通过智能技术生成

前端如何解决图片太多加载资源慢的问题

使用图片服务器

把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就可以并发请求了，我们公司使用腾讯云cos，把图片上传腾讯云，获取图片URL地址，

使用图片懒加载

按需加载数据，可以刚开始只加载10条数据，当页面滚动到特定位置触发事件函数请求接口，获取数据把图片值赋值给是img的src属性

CSS sprites

把所有的图片放在一张大图上，通过background-position属性设置位置，但是这样写每次修改图片都需要重新做一张图，重新定位，如果项目很稳定修改不多，可以使用，如果迭代频繁不建议使用，麻烦

miao_zz
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页中有大量图片加载很慢，用什么方法进行优化
weixin_43961899的博客
02-21 7294
图片预加载 原理：在网页全部加载之前，提前加载图片，当用户需要查看图片时，可以从本地缓存中直接渲染，提供用户更好的体验，减少等待时间。 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://alifei
前端|加载的图片太多五种优化方法
qq_33539213的博客
05-18 7296
摘要 web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长. 本篇将针对图片太多或者太大总结几种优化方案. 一.当图片太多时 方案一:将图片服务和应用服务分离(从架构师的角度思考) 对于这个方案对于经验尚浅的我来说是考虑不多的,通过跟leader沟通,了解...
关于页面有太多图片，加载慢问题
weixin_43019637的博客
08-20 1万+
一个页面上有大量的图片，加载很慢，你如何优化？ 1.图片为css图片： 可以使用：CSSsprite，SVGsprite，Iconfont，Base64（精灵图，小图标…） 2.图片过大： 可以使用特殊编码图片，先加载一张压缩特别厉害的缩略图，提高用户体验，如果图片展示区域小于图片真实大小，会在服务器端根据需要先进行压缩，图片压缩后大小与展示一致 3.图片懒加载 在页面添加滚动条事件，...
Vue3图片显示组件，支持多张图片，缩略图，全屏动态加载大图
最新发布
qiuzen的博客
06-22 712
通过imgs参数传入多张图片，图片路径中包含 /small/ 表示是缩略图，将 /small/ 改为 / 即是该图片的大图。组件首先显示缩略图，然后在mounted事件中js动态加载大图，加载完毕后用大图的内容替换缩略图，实现高清图片的丝滑加载显示。点击图片后进入全屏模式，可浏览整组图片，同样会在后台用Js动态加载大图，实现高清图片的丝滑加载显示。邀请您加入「社区资讯服务」创业微信群，共同探讨打造社区资讯服务的美好未来。以上如有错漏之处，敬请大家指正。微信：TobeBuda。
解决网站加载图片太慢
qq_48621751的博客
08-04 9884
解决网站加载图片太慢
Vue中如何进行响应式图像与图片懒加载优化
u013749113的博客
10-05 797
在Vue中实现响应式图像和图片懒加载优化是提高网站性能和用户体验的关键步骤。通过绑定图像的src属性和使用计算属性，您可以创建响应式图像，使其适应不同的用户设备。而使用Vue-Lazyload库，您可以轻松地实现图片懒加载，延迟加载页面上的图像，提高页面加载性能。通过合理使用这些技术，您可以改善您的Vue应用程序的图像加载性能，为用户提供更好的体验。希望这篇文章对您有所帮助，如果您有任何问题或需要进一步的指导，请随时提问。
前端知识点（六）：网页中有大量图片时加载很慢，如何优化？
蒋小姐的博客
12-14 4577
1.图片懒加载 在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，当图片到浏览器顶端的距离，小于图片到页面的距离时，优先加载。 2.图片预加载 将当前展示图片的前一张和后一张优先加载 3.使用csssprite或者svgsprite ...
前端页面卡顿怎么去优化
weixin_35754962的博客
01-06 2010
前端页面卡顿的原因有很多，下面是一些常见的优化方法： 减少 HTTP 请求数量：合并文件、使用 CDN 加速、使用缓存 压缩文件：使用 Gzip 压缩 CSS、JavaScript 和 HTML 文件 优化图像：使用合适的图片格式、压缩图片、减少图片数量 使用内容分发网络 (CDN) 加速：将静态资源存储在 CDN 上，可以减少用户与服务器之间的网络延迟 使用异步加载：避免阻塞页面渲染的脚本放在...
nginx解决图片显示过慢，下载不完全的问题
09-29
在本文中，我们将深入探讨如何...正确设置Nginx参数可以显著提高服务性能，解决如图片加载慢和文件下载不完全等问题。在遇到此类问题时，应首先进行问题定位，然后针对性地调整配置参数，以实现高效、稳定的服务运行。
JS iFrame加载慢怎么解决
01-19
在项目中经常要动态添加iframe，然后再对添加的iframe进行相关操作，有时候会遇到iframe加载很慢什么原因呢，该如何解决呢？带着这个问题一起通过本文学习，寻找答案吧！ aaa.html <HTML> <HEAD> <...
瀑布流 无限加载图片
05-05
综上所述，实现瀑布流无限加载图片涉及了前端布局、JavaScript编程、异步请求、响应式设计以及性能优化等多个方面的技术知识。通过这些技术的综合运用，可以为用户提供流畅、高效的图片浏览体验。
前端大厂最新面试题-前端性能优化.docx
06-06
前端性能优化是非常重要的一方面，好的性能优化可以提高网站的用户体验，而坏的性能优化则可能会带来麻烦和规则太多的问题。在这个知识点总结中，我们将介绍八个方面的前端性能优化知识点。 1. 减少 HTTP 请求 ...
traktclone:因为 trakt.tv 的 api 改变了。 而且加载速度太慢
06-30
traktclone是一个基于Python的项目，旨在应对trakt.tv API的变化以及其加载速度过慢的问题。trakt.tv是一个流行的娱乐跟踪服务，允许用户记录他们观看的电影和电视节目，同步跨设备的观看历史，并参与社区互动。然而...
img src 本地图片_一次 Web 端大量图片同时加载卡顿问题的优化之旅
weixin_39721953的博客
12-01 647
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]作者：苏格团队https://juejin.im/post/5cbd30e7e51d456e803516ba背景由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。具体场景在描述如何解决问题，我们现在先来申明，问...
前端优化 之 图片预加载和懒加载
Sco_jing的博客
11-30 3001
欢迎学习交流！！！ 持续更新中… 文章目录预加载什么是预加载为什么要用预加载预加载的实现懒加载什么是懒加载为什么要用懒加载懒加载的实现懒加载优化预加载和懒加载的比较 预加载 什么是预加载        资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 为什么要用预加载   &nbsp.
vue 图片加载太慢怎么办_前端性能优化之图片懒加载（附vue自定义指令）
weixin_28852151的博客
01-26 1万+
作者：lzg9527链接：https://juejin.cn/post/6903774214780616718在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。为什么要进行图片懒加载我们先来看一下页面启动时加载的图片信息。如图所示，这个页面启动...
解决VUE前端首页加载缓慢，app.js文件过大的问题
大雪封山的时候
12-23 1万+
经过分析及资料查询，解决此问题有三个路径可走： 目录 1.删除不需要的依赖 2.进行jscss压缩(1.打包时压缩 2.nginx压缩) 2.1打包时压缩 2.2nginx压缩(官网推荐) 3.使用cdn加速 1.删除不需要的依赖 分析发现的在线表单占用较大，考虑到实际场景中基本不使用，删除相关依赖。需要修改3个文件 util.js main.js package.json 然后删除node_modules...
img加载卡顿，解决办法
weixin_30763397的博客
10-28 1630
我觉得我在这个项目里遇到了太多的第一次。比如上一篇博文：在在360、UC等浏览器，img不加载原因。 当前情况是：图片加载缓慢，图片加载时出现卡顿。 上图：我缩放了图片，估计有点变形。能说明情况就行，粗糙点就粗糙点吧。 1.单张图片加载情况： 加载完： 2.banner图加载情况 情况说明 banner有3张图，加载的时候就分了三层。发现这个情况的时候，我表示自己很萌萌哒...
解决vue首屏加载慢，白屏的问题
热门推荐
挥别了青春的博客
09-27 1万+
1.路由懒加载 // 需要ES6支持 const HelloWorld = () =&gt; import('@/components/HelloWorld.vue') export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, ] }) ...
前端io什么时候会堵塞
10-12
前端io会在以下情况下出现堵塞： 1. 页面加载过多静态资源：当页面需要加载大量的CSS、JavaScript文件或者其他静态资源时，浏览器需要依次请求这些资源，并等待服务器响应。如果静态资源过多或者服务器响应时间过长，会导致页面加载时间延长，从而堵塞了前端io。 2. 同步请求：当前端代码发起同步请求时，浏览器会等待服务器响应完成后再继续执行后续代码。如果服务器响应时间过长或者网络延迟严重，会导致前端io堵塞，用户在这段时间内无法进行任何操作。 3. 阻塞的JavaScript代码：如果在JavaScript中存在大量的计算、循环或者长时间的操作，这些耗时任务会阻塞浏览器执行其他的任务，从而导致前端io堵塞。在这些任务执行期间，用户无法进行交互操作，页面也无法正常响应。 4. 长轮询或者长连接：当应用程序需要保持与服务器的持续通信时，可能会使用长轮询或长连接的方式。这些方式的特点是需要在一段时间内保持连接并等待服务器的响应。在这段时间内，前端的io会一直被占用，无法进行其他操作。 总之，前端io在页面加载、请求响应、JavaScript代码执行以及与服务器的持续通信等情况下会出现堵塞。为了提升用户体验，我们需要合理优化前端代码以避免这些情况的发生，提高页面响应速度和用户交互的流畅性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值