img加载本地图片_图片加载技术-懒加载和预加载

懒加载也就是延迟加载。

具体表现为：

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张占位图的路径，这样就只需请求一次，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

好处：

很多页面，内容很丰富，页面很长，图片较多。比如瀑布流，图片数量多且大，如果一次性加载完毕，用户等待时间过长。懒加载页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好。

技术原理：

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“pic-url”(自定义命名)属性里，要用的时候就取出来。

实现步骤：

1、不要将图片地址放到src属性中，而是放到其它属性中。

2、页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

3、在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

预加载也就是提前加载图片

具体表现为：

当用户需要查看时可直接从本地缓存中渲染

好处：

图片预先加载到本地中，访问者便可享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

实现预加载的方法：

方法一:用CSS和JavaScript实现预加载

方法二:仅使用javascript实现预加载

方法三:使用Ajax实现预加载

懒加载和预加载的区别

两种技术行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

img加载本地图片_图片加载技术-懒加载和预加载相关推荐

cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
css怎么实现加载的圆圈_图像高清方案——响应式图像让图像加载又快又省
# 什么是响应式图像响应式图像指的是根据设备分辨率.设备像素比,甚至是屏幕方向.屏幕尺寸.页面布局等来加载正确图像,并且图片体积尽可能的小,视觉效果足够高清. 一个真实的场景:用户上传了一张高清图片 ...
.net pdf转图片_图片转PDF怎么转？推荐两种图片转PDF方法
在我们的工作和学习中,我们有时候需要将图片转换为PDF格式的文件.因为PDF格式的文件查看起来很不容易,所以它可以确保图片文件中的信息不被泄露.那么图片转PDF怎么转呢?大家可以参考下面这两种方法,一 ...
ue4加载本地版本_【虚幻4】创建本地数据库
简介: 这里我们主要通过使用Data table实现本地数据库. Data table可以用来保存一些用户配置,或者常用变量,或者用来实时更新外部表格数据到虚幻4中. 一.创建Data table 1 ...
cesium 3dtiles 加载本地数据_记一次Cesium地形数据生成过程
问题描述有一小块带高程值的点状数据,需要根据该数据生成Cesium支持的3dtiles数据,在Cesium中显示.经过一周多时间的摸索,终于能够在Cesium中加载成功.现将数据处理流程做个记录,以 ...
itext pdf转图片_图片转PDF怎么转换？可以试试这个PDF转换软件
图片转PDF怎么转?图片虽然是一种很方便的文件,但是也比较占内存,尤其是现在的图片分辨率都很高,一张图片的体积就很大了.而PDF文件有个优点就是体积小,当我们有大量图片需要保存时,可以选择将图片转换成 ...
vue通过链接显示服务器上的图片_图片网站该如何做SEO优化？详细讲解图片优化技巧...
通常,在网站搜索引擎优化的过程中,很多站长和SEOer经常忽略图片的优化,但事实上,每个网站都有很多图片,所以优化网站图片就像优化其他内容一样,成为搜索引擎优化的一个重要工作内容. 如果你能成功地优化 ...
os如何读取图片_图片批处理｜必备小技能
微信公众号:*AI算法与图像处理关注可了解更多的编程小技巧和优质资源.问题或建议,请公众号留言;如果你觉得对你有帮助,欢迎好看和分享哈内容目录图片批处理简介具体事项1)分析文件的存储情况2) ...
java如何叠加图片_图片叠加效果Java代码实现
本文实例为大家分享了Java实现图片叠加效果展示的具体代码,供大家参考,具体内容如下 import java.awt.AlphaComposite; import java.awt.Graphics2 ...

img加载本地图片_图片加载技术-懒加载和预加载

img加载本地图片_图片加载技术-懒加载和预加载相关推荐

最新文章

热门文章