预加载和懒加载

最新推荐文章于 2024-04-27 07:45:00 发布
最新推荐文章于 2024-04-27 07:45:00 发布
阅读量1k 收藏 2
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lin_lin_zhao/article/details/91963431

预加载
一般用于移动端 用于图片比较多的情况 避免在项目中加载缓慢 影响用户体验 所以需要在进入项目前提前加载图片
做法是把所有图片的路径 放在一个数组中 然后使用循环遍历这个数组 每次创建一个图片对象 并把路径赋值给这个图片对象的src属性 这样就完成加载 其中使用 onload事件判断每个图片是否加载完成

懒加载
项目中图片过多的情况下 一般在可视窗口内的图片加载 可视窗口之外的图片不加载 当图片滚动进可视窗口内才让它加载
做法是可视窗口外的图片 先不给它的src属性赋值 而是把图片路径放在一个自定义属性里 当页面滚动 通过srcollTop判断图片滚动进可视窗口 把自定义属性中的路径赋值给src属性 这样就完成加载

小程序H5开发中的图片懒加载与预加载
小程序开发
05-20 743
本文旨在为前端开发者提供完整的图片加载优化解决方案，覆盖Web/H5和小程序两大平台，重点解决移动端场景下的图片加载性能瓶颈问题。对比分析两种加载策略的本质差异详解浏览器原生实现方案构建数学模型进行性能量化多平台框架的工程实现方案生产环境最佳实践指南懒加载(Lazy Loading)：按需加载策略，当媒体资源进入可视区域时触发加载预加载(Preloading)：预测性加载策略，提前获取后续可能需要的资源视口(viewport)：用户当前可见的网页区域。
图片预加载与懒加载
weixin_30825581的博客
04-12 199
一、预加载 前面做了个招聘页面，里面有大量的图片需要加载。 一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。 微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。 这显然是无法忍受的，马上就加了预加载的功能，我只是简单的使用了一下。 预加载就是通过Image对象，给这个对象添加“s...
懒加载和预加载
YiDaShi33的博客
01-10 3635
懒加载与预加载
懒加载与预加载
weixin_48864616的博客
12-29 437
1.概念 (1) 懒加载(延迟加载):图片延迟加载,当图片进入视口之后才加载 (2) 预加载:提前加载图片,当用户需要查看时,直接从本地缓存读取 在实际开发者中懒加载用的比较多 2.区别 二者都是提高页面性能的有效办法 区别是一个是提前加载,一个是延迟加载甚至不加载 懒加载对服务器前端有一定的缓解压力的作用,预加载则会增加服务器前端的压力 3.意义 (1) 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 (2) 预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户
图片预加载和懒加载
weixin_33720452的博客
01-23 293
对于前端性能来说，图片是一个过不去的坎，又想能页面美观，又想页面响应速度快，那么这时候就有了两个技术，图片懒加载和预加载。在这边我只介绍一些方法和原理，不具体把方法的代码贴出来。 懒加载：在需要显示图片的时候才去加载图片。 预加载：在还没显示的时候就加载图片。 在说预加载和懒加载之前。我们先说说图片加载的时机。 1、设置了display: none的img标签和元素背景图片，不会渲染但是会加载。 ...
超详细的图片预加载和懒加载教程
FOR 的博客
09-04 9019
最近接手一个项目 。 结果光安装依赖都出现了一堆 麻烦 。 好不容易处理完一个 ， 又来一个 。头疼啊 看到之前有一些预加载的学习笔记。于是又查查找找 ，想想写写 把预加载和懒加载的笔记写完整 发现制图挺麻烦的！不知道你们有没有什么推荐？ 写了挺久的这篇文章，有什么不对的地方欢迎评论或私聊指出 图片的预加载和懒加载 预加载和懒加载的字眼总会看到 。 其实预加载和懒加载不仅仅是用于加载图片资源。其他资源，文字，视频。都可以。 我们较常用或较需要使用的场景就是加载图片资源。 这里，我们也只讨论加载图片资源。.
【JavaScript源代码】javascript实现图片预加载和懒加载.docx
12-29
为了提高用户体验并减少服务器压力，开发者通常会采用图片预加载(preloading)和懒加载(lazy loading)两种技术来优化图片的加载过程。 #### 二、图片预加载 ##### 定义与作用 预加载是指在页面加载过程中预先加载...
解析javascript图片懒加载与预加载的分析总结
10-21
总结来说，图片懒加载和预加载各有优劣，懒加载着重于减少服务器压力和提高首屏加载速度，而预加载则侧重于提升用户体验，保证用户访问资源的快速响应。在实际开发中，开发者需要根据具体需求和场景选择合适的实现...
前端性能优化篇之懒加载的概念、特点、实现原理、懒加载与预加载的区别
星辰迷上大海的博客
04-27 5239
懒加载是一种网页优化技术，其概念是延迟加载页面中的资源，特点是在用户需要访问时才加载，可以减轻初始加载压力和节省带宽。
懒加载和预加载的区别
weixin_55076626的博客
04-18 3263
概念： 懒加载：懒加载也叫延迟加载，JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 区别： 两者的行为是相反的，预加载是提前加载，懒加载是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 意义： 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 预加载：预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。 实现
懒加载和预加载的区别_懒加载的实现原理
weixin_39835321的博客
12-08 575
题图 By clm From Bing前端工程师在做页面优化的时候，如果页面中是类似图片列表的结构，会考虑使用懒加载(Lazy-Load)技术来优化页面的加载速度，今天就带大家来探究一下懒加载的原理。首先我们实现页面布局，代码如下：<html lang="en"><head> <meta charset="UTF-8"> <meta ...
懒加载和预加载的区别_【web】懒加载 so easy！
weixin_39798579的博客
12-13 208
文章目录一、前言二、关联知识点1、HTML5的`data-*`2、防抖和节流二、`getBoundingClientRect()`实现懒加载1、API介绍2、懒加载实现三、`IntersectionObserver`实现懒加载1、API2、懒加载实现四、css属性loading实现懒加载1、API2、懒加载实现五、总结一、前言什么是懒加载？懒加载顾名思义，相对于正常资源的加载显得不那么勤...
QTableView数据预加载和懒加载技术
最新发布
05-15
### QTableView 数据预加载与懒加载实现方式 #### 一、数据预加载 数据预加载是指在程序启动或者特定操作触发时，提前将部分或全部数据加载到内存中以便后续高效访问。对于 `QTableView` 的场景来说，可以通过以下几种方式进行优化： 1. **使用高效的 Model 实现** 继承 `QAbstractTableModel` 或其他适合的基类来自定义模型，并提供必要的接口函数支持数据存取功能[^2]。例如： - 提供 `setItemText()` 和 `itemText()` 方法用于设置和获取单元格文字。 - 使用 `setData()` 和 `data()` 函数处理编辑角色 (`Qt::EditRole`) 及显示角色 (`Qt::DisplayRole`)。 下面是一个简单的例子展示如何通过自定义模型实现批量数据加载： ```cpp class CustomTableModel : public QAbstractTableModel { Q_OBJECT private: QVector<QVector<QString>> m_data; public: explicit CustomTableModel(QObject *parent = nullptr); int rowCount(const QModelIndex &parent = QModelIndex()) const override; int columnCount(const QModelIndex &parent = QModelIndex()) const override; QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override; bool setData(const QModelIndex &index, const QVariant &value, int role = Qt::EditRole) override; void loadData(const QStringList &rows); // 预加载数据的方法 }; void CustomTableModel::loadData(const QStringList &rows) { for (const auto &rowStr : rows) { QStringList rowData = rowStr.split(","); m_data.append(rowData.toVector()); } emit dataChanged(QModelIndex(), QModelIndex()); // 刷新视图 } QVariant CustomTableModel::data(const QModelIndex &index, int role) const { if (!index.isValid() || index.row() >= m_data.size()) return {}; if (role == Qt::DisplayRole) return m_data[index.row()][index.column()]; return {}; } ``` 2. **分页机制** 如果数据量较大，则可以在初始化阶段只加载前几页的数据，在滚动或其他事件发生后再动态追加更多记录。这种方式既减少了初始开销又提高了用户体验。 --- #### 二、懒加载技术 懒加载是一种按需加载的技术手段，当用户实际浏览某部分内容时才去请求对应资源并渲染出来。针对 `QTableView` 而言，主要涉及以下几个方面： 1. **重写 `data()` 方法控制延迟计算逻辑** 当调用 `data()` 查询某个索引项的信息时，如果发现该位置尚未被填充过有效值，则即时从外部源提取所需资料完成赋值过程。下面给出一段伪代码说明这一思路： ```cpp QVariant LazyLoadModel::data(const QModelIndex &index, int role) const { if (role != Qt::DisplayRole && role != Qt::EditRole) return {}; if (m_cache.contains(index)) { // 已缓存则直接返回 return m_cache.value(index); } else { // 否则执行真正的IO读取动作 QString value = fetchFromDatabase(index.row(), index.column()); m_cache.insert(index, value); return value; } } ``` 2. **结合虚拟代理模式减少不必要的实例化成本** 对于某些复杂控件（比如嵌入式图像），可以先绘制占位符代替真实对象直到确实需要查看它们为止。具体做法可参见如下片段： ```cpp QWidget* ImageDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const { if (!isImageLoaded(index)) loadThumbnailAsync(index); QLabel *label = new QLabel(parent); label->setPixmap(getCachedPixmap(index)); return label; } ``` 3. **利用信号槽监听垂直滚动条变化调整可见区域范围内的项目更新频率** 此外还可以借助 `verticalScrollBar()->valueChanged(int)` 来捕获用户的上下拖拽行为从而决定何时重新评估哪些行应当处于激活状态之下进而触发相应的网络下载任务等等[^3]^。 --- ### 总结 无论是采用何种策略都需要综合考虑目标平台硬件性能指标以及最终呈现效果之间的平衡关系。以上介绍了一些常见的关于 `QTableView` 中应用数据预加载同懒加载相结合的最佳实践经验希望能够对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值