05资源优化-03图片加载优化

最新推荐文章于 2024-05-30 21:00:00 发布
最新推荐文章于 2024-05-30 21:00:00 发布
阅读量134 收藏
点赞数
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trust_future99/article/details/114223309
版权

1. 懒加载

1.1 原生懒加载(loading)

在这里插入图片描述

1.2 第三方图片懒加载方案

如：
lazy-load-imgs
Lazy Load

比较好的文章：
图片懒加载相关文章

2. 使用渐进式图片

目前主要使用的图片加载方式有两种：线性加载和渐进式加载

2.1 线性加载

线性加载其实就是在我们浏览网页时常看见的那种 —— 网速足够慢或者图片尺寸过大时，可以看到图片的加载方式由上至下，一点一点的加载。

2.2 渐进式加载

渐进式 则如同名字一般, 它会先显示低分辨率的近似图像，再逐步的增加图片分辨率(模糊到清晰)

相关优秀文章：How Medium does progressive image loading

3. 使用响应式图片

自适应网页设计（Responsive Web Design）

响应式图像教程

trust_future99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)
LYFlied的博客
03-29 1万+
懒加载实现方案 一.大量图片加载优化方案 1.将图片服务和应用服务分离(从架构师的角度思考) 2. 图片压缩方案 3.图片懒加载 实现方案一 实现方案二 4.小图片比较多时 5.http2解决连接数限制 二、图片过大加载优化方案
web性能优化--用gzip压缩资源文件
热门推荐
yjclsx的博客
07-31 43万+
一、gzip压缩技术 gzip(GNU- ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心，因为目前的大多数浏览器都支持解析gzip压缩过的资源文件。在实际的应用中我们发现压缩的比率往往在3到10倍，也...
前端页面性能优化 - 字体加载优化
weixin_45795785的博客
11-17 3885
相比于英文的字库来说，中文字库的体积非常之大，的体积非常常见。所以在前端页面性能优化中，字体加载的优化就显得尤为重要。阅读了相关的知识和文章，在研究了市面上字体加载方案之后，我总结出了目前可行的方案。
老生常谈-vue页面加载速度优化
yummry的博客
07-05 1990
做完加版上线，折腾到半夜，下午来了之后总算能清闲一些，搞一些非业务的东西来充实下自己。正好昨天上线时发现项目中有个h5手机端页面，首屏加载非常缓慢。决定优化下 现状 测试环境下，在chrome打开页面，加载需要将近13s，才加载完。下载了4M的资源包。 备份 为了不影响测试环境，肯定要自己搭建一个环境来测试优化效果。此处，明总的服务器又体现出效果了，白嫖的快乐。 然后再本地单独开一个测试分支，方便后续跟进 开始 1. 测试环境，静态资源404 没想到开始就在测试环境碰到了坑，打包出的页面无法访问到静态.
加载大量图片优化方案
最新发布
接着奏乐接着舞的博客
05-30 1616
图片压缩通过减少图片文件的大小来提高加载速度。通过压缩图片，页面加载所需的带宽减少，从而提高了加载速度。这样可以显著减少初始页面加载时间，因为只加载当前视口内的图片。通过结合以上优化技术，你可以显著提高图片加载的性能，提供更好的用户体验。使用现代格式可以进一步减少图片文件大小，提高加载速度。用户请求图片时，会从距离最近的服务器获取，从而提高加载速度，并减少服务器的负担。瀑布流布局将图片分布在不同的列中，随着用户滚动页面，逐步加载新的图片。预加载关键图片可以确保这些图片在页面加载时立即可用，提升用户体验。
前端优化-图片懒加载
li_mancheng的博客
07-25 2199
上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求。 懒加载介绍： 通俗介绍：懒加载怎么个懒法，就
单页应用优化--懒加载
李刚的学习专栏
05-02 3864
单页Web应用（single page web application，SPA）会一次性载入页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验。由此带来了首屏加载缓慢耗时的诟病，这也是困扰前端开发工程师的一重大难题。 最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的Polyfill方式） 按需加载 // 全部加载 import 'cc...
必知必会篇-前端性能优化之加载优化
老司机的后备箱
10-31 1946
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。使用图片懒加载就可以解决上述问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。懒加载适用于图片较多，页面较长的页面场景中。**懒加载与预加载的区别：**一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
微信小程序--图片懒加载
海到无边天作岸 山登绝顶我为峰
05-21 4558
定义         图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。         简单的说，就是只有出现在屏幕中的图片系统才选择加载，其他图片则不加
移动端对大批量图片加载的优化方法（一）
Kevin写代码
01-09 1633
创建自定义的ImageVIew的子类，在layoutSubviews方法中检查图片是否可见，只有在图片即将显示时调用setImage方法。对于更复杂的用例，可以实现自己的缓存策略；考虑使用键值存储（如UserDefaults或CoreData）或第三方缓存库（Haneke或Flare）。// 配置Flare// 使用Flare加载图片并缓存print("加载图片失败: \(error.localizedDescription)")
IOS开发中加载大量网络图片优化方法
08-30
6. **图片预处理**：包括压缩、格式选择和尺寸适配，优化加载效率和内存占用。 7. **加载状态处理**：提供良好的加载状态反馈，增强用户体验。 通过以上优化措施，可以显著提高大量网络图片加载的性能，为用户带来...
原生JS实现图片懒加载之页面性能优化
10-17
总之，原生JavaScript实现的图片懒加载是一种实用的页面性能优化技术，它有效地平衡了资源加载与用户体验之间的关系。结合现代浏览器API和最佳实践，我们可以构建出更加高效的网页。在实际项目中，开发者可以根据...
游戏UI动态加载图片优化-附件资源
03-02
游戏UI动态加载图片优化-附件资源
网页前端优化之滚动延时加载图片示例
09-05
网页前端优化是一个重要的领域，旨在提升用户体验，减少页面加载时间，以及优化资源的使用。滚动延时加载图片，也称为懒加载（Lazy Loading），是一种有效的前端优化策略，它避免了一次性加载所有图片导致的页面加载...
递归格式化省市区三级联动数据
trust_future99的博客
11-18 2574
原数据格式：china-area-data组件下的data.json数据。 目标数据格式：依照elementUI的Cascader 级联选择器所需要的options格式。 //citysFormat.js const fs = require("fs"); var destArr = []; //目标对象 var orginArr = {}; //初始对象 fs.readFile("./...
浏览器获取当前经纬度
trust_future99的博客
01-09 1419
navigator.geolocation.getCurrentPosition(function geoSuccess(event) { console.log(event.coords.latitude + ', ' + event.coords.longitude); },function geoError(event) { console.log("Error code " + event.code + ". " + event.message); });
03渲染优化-03防止布局抖动的利器-fastDOM
trust_future99的博客
02-26 1362
fastDOM fastDOM gitee地址 fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); Outputs: rea
js slice()方法
trust_future99的博客
01-06 733
slice()方法用于提取目标数组的一部分，返回一个新数组，原数组不变。 // 语法 // start:起始位置,从0开始 // end:结束位置(不包括该位置本身的元素)，此参数省略，会一直到原数组结束 arr.slice(start, end); //DEMO var arr1 = ['1','2','3']; var arr2 = arr1.slice(); // 提取整个数组到一个新数组 console.log(arr1,arr2); arr2.push('88'); //修改arr2 c.
js中的this对象和箭头函数中的this
trust_future99的博客
02-05 605
简单说，this就是属性或方法“当前”所在的对象。 Demo1(一般使用——this：定义时所在的对象（当前所在的对象）) var person = { name: '张三', describe: function () { return '姓名：'+ this.name; } }; person.describe() 这里的this,是指describe函数所在的对象（即person）。 Demo2（方法嵌套返回——this：调用时所在的对象（当前所在的对象）） 稍微改造下，如下
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值