对于高清图片背景加载慢的处理新的

最新推荐文章于 2024-05-18 08:00:00 发布
原创 最新推荐文章于 2024-05-18 08:00:00 发布 · 1.6k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种前端优化技巧，通过使用预加载低分辨率背景图和高清背景图叠加的方法，解决登录页背景加载慢的问题，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端做登录页时常会遇到这样的问题：
要求登录页背景图高清，可高清图片太大，普遍加载慢，导致加载过程中背景图不完整而使交互体验变差
关于这一点我一直这样做的，

给背景图容器，多加一层同宽高的父容器，分别设置背景图
即处理一张低分辨率模糊，最主要是小、加载快的背景图pre-bg压在下面，
上面一层放高清大背景bg，

加载过程中，pre-bg很快加载完成，我们会立即看到一张模糊的背景图
紧接着就是高清bg慢慢加载的过程，我们会看到如下图片慢慢清晰的一个过程，
这个过程看着还是很舒服的
在这里插入图片描述

reffrselom
关注
js判断背景图片是否加载成功使用img的width实现
12-10
非背景图片可以用img的onerror 来判断,但是背景图片呢,刚无意中发现一个方法,目测可行,但不确定是否始终可行。 代码如下: var img=new Image(); img.src=”图片地址”; if(img.width==0){//表示图片加载失败了} else{//成功了} 这方法一般情况下可行,但是为测试过图片很大或者加载速度很慢的时候是否可行。
首次登录界面使用大图片做背景，加载缓慢
weixin_43801836的博客
11-07 1439
使用骨架屏：骨架屏是需要自己画的，你需要把布局画好做成一个组件，在需要的页面引用，然后等数据请求回来以后隐藏掉再显示正常的页面就可以。通常仅仅在接口请求比较多的页面用到骨架屏，路由懒加载：webpack打包时会把懒加载的路由组件打包成单独的js bundle，在出发时再调用。预渲染： 使用 Preload/Prefetch 优化。解决首次登录，加载缓慢的过程。
【前端优化】登录页背景图加载缓慢？？？压缩一下会好很多！！！
weixin_44542404的博客
02-18 868
公司内部的业务系统基本都有登录页，背景图基本都是UI切的高清2倍图，文件大小基本都是10mb+，就会导致在业务系统首次加载或者网速较差的情况下背景图加载时卡顿，一帧一帧出现，然后和UI试了一下，将背景图进行压缩之后，在不很是掉画质的情况下，压缩后的背景图可以实现秒开。1、如果和UI的关系比较好，就让他/她帮忙压缩一下。2、图片压缩工具 –
图片加载速度慢，怎么优化css
IvanWKQ的博客
11-11 1125
最近写系统官方主页时，碰到图片加载速度慢的问题记录总结首先主页加载了很多图片，图片也挺大的，而且有很多背景图片。
前端布局-背景图片加载速度慢的坑
热门推荐
肥皂社社长
06-04 1万+
1、检查UI设计师的素材包，是否包含过于大的素材接了个30M的图标，加载的那个速度呀，画面太美，不堪入目。2、代码检查图片大小考虑是否压缩图片上传需要考虑...
Android App中使用Glide加载图片的教程
01-04
与其他图片加载库相同，Glide除了可以加载网络图片之外，也可以加载本地图片。甚至还可以从各种各样奇葩的数据源中加载图片。 加载网络图片 很多情况下，我们使用图片加载库就是为了加载网络图片。网络操作是一个很...
jquery图片延迟加载
06-20
在网页设计中，图片加载是一项关键任务，尤其对于内容丰富的网站，如果所有图片一次性加载，可能会导致页面加载速度变慢，用户体验下降。为了解决这个问题，开发人员引入了“图片延迟加载”技术，jQuery作为一款广泛...
前端优化图片加载速度的技术详解
为了WLB努力
05-18 1693
随着现代网页内容越来越丰富，图片成为了不可或缺的一部分。然而，大量或高分辨率图片的加载常常会导致网页性能下降，用户体验变差。本文将详细介绍几种前端优化图片加载速度的技术，并提供相应的代码示例。
css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片
weixin_39876645的博客
08-03 8784
之前写过一篇：CSS中background属性总结整理了background的常用属性。日常项目中经常会用到全屏的图片， .png 和 .jpg 的图片都太大，加载缓慢。我们可以使用webP格式的图片或者分辨率较低的压缩图，再叠加一层清晰的png 图片，实现快速显示的效果。叠加 png 图片的目的是防止某些浏览器不支持 webP 格式。CSS代码：body{background-image:...
html 背景图加载过慢解决思路
weixin_45502613的博客
04-24 5762
压缩图片的大小 第一个压缩图片网站 第二个压缩图片网站
html背景图片加载慢,javascript – 如何加快我网站的背景图片加载速度？
weixin_42137539的博客
06-04 2067
我正在努力提高website的性能.在Chrome DevTools中,我看到bg2.jpg的请求在开始下载时被延迟了. 我认为这种情况正在发生,因为我使用JavaScript生成URL并将其设置为CSS中的背景图像,Chrome浏览器正在优先处理包含此代码的脚本标记.let bgImgName = "bg" + Math.floor(Math.random() * 5);...document...
图片加载缓慢的原因及解决办法
正在解锁骑着骆驼去南极的世界
02-26 1万+
优化图片大小、压缩和优化图片、优化服务器性能、分批加载图片、懒加载、考虑用户网络环境等都是提高页面加载速度的有效方法。
当一个页面有大量图片时，导致加载很慢，有哪些方法优 化这些图片的加载，给用户更好的体验？
Beggarya的博客
05-10 1966
一个页面上有大量的图片，加载很慢，有哪些方法优 化这些图片的加载，给用户更好的体验。
网页优化 CSS Sprites 背景图 一次加载
小巴黎
07-03 1240
对于访问者来说，网站的页面能够即时的呈现出来，无疑是让人感到很愉快的一件事；而相反的是如果网页打开速度很慢的话，无疑这个网站将损失很多的用户。据许多研究表明：用户最满意的打开网页时间，是在2秒以下；用户能够忍受的最长等待时间的中位数，在6～8秒之间；如果等待1
前端背景图片模糊较好的办法
gaoshan1999的博客
12-01 1160
背景模糊虚化
背景原生图片加载慢，使用替代背景
jieweiwujie的博客
09-26 211
【代码】背景原生图片加载慢，使用替代背景。
html加载超大像素图片,html – 首先加载低分辨率背景图像,然后加载高分辨率图像...
weixin_31925685的博客
06-03 338
这是我使用的方法CSS：#div_whatever {position: whatever;background-repeat: no-repeat;background-position: whatever whatever;background-image: url(dir/image.jpg);/* image.jpg is a low-resolution at 30% quality. ...
通过webView全屏加载高清大图片，解决不能全屏高清加载图片问题
RongDaiL的专栏
06-04 1883
1、布局：               android:id="@+id/webview"             android:layout_width="match_parent"             android:layout_height="match_parent"/> 2、在工程的assets文件夹中加入： 3、在代码中建立js 连接：    private
vue背景图片加载慢
最新发布
07-10
我们讨论的是Vue项目中背景图片加载慢的问题。背景图片通常通过CSS的background-image属性设置，而图片懒加载通常针对标签。对于背景图片，我们需要不同的懒加载策略。 ### 解决方案 以下是针对Vue项目中背景图片懒...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值