html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的
img 标签
img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会立即开启一个线程去请求该资源。
正常情况是解析到了src便发起请求,
img 标签隐藏
通过css样式隐藏img的显示
复制代码
发现除了Opera不请求,其他浏览器都会马上请求,
复制代码
全部浏览器都会请求
2. img 同一张图重复
复制代码
所有的浏览器都只请求一次,因为http在发出请求的时候,会检验是否有缓存,有缓存就会从缓存读取
那么你知道如何判断资源是否是缓存还是服务器返回的呢,看这边
img 在background中
重复背景
.test1 { background: url(bg1.jpg) }
.test2 { background: url(bg1.jpg) }
复制代码
所有浏览器都只发起一次请求
隐藏元素背景
.test3 { display: none; background: url(bg2.jpg) }
复制代码
Opera 和Firefox对display:none的元素的背景,不会立即发生请求,只有当其display 不为none才会发起图片请求。其他浏览器则是立即发起请求
重写背景
.test1 { background: url(bg1.jpg) }
.test1 { background: url(bg2.jpg) }
复制代码
重写背景,浏览器只会请求覆盖的那个背景图
多重背景
.test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); }
复制代码
对全部的背景都会请求
元素不存在,但是设置了背景
.test3 { background: url(bg3.jpg) }
.test4 { background: url(bg4.jpg) }
复制代码
.test4并不存在,这个时候,浏览器并不会去请求bg3.jpg,当且仅当背景的应用元素存在时(不管在当前是显示还是不显示),才会发生请求
hover背景
a.test1 { background: url(haorooms.jpg); }
a.test1:hover { background: url(http2.jpg); }
复制代码
触发hover的时候,才会请求hover下的背景。在实际中,会遇到这个背景图初次显示闪一下的情况,如果要优化,就预加载这张图即可。
js动态生成img并赋值
var el = document.createElement('div');
el.innerHTML = '';
//document.body.appendChild(el);
复制代码
只有Opera 不会马上请求图片,其他浏览器都是执行了代码就发起请求,Opera一定要元素添加到dom时,才会发出请求
在做项目的过程中,经常会遇到需要图片预加载与懒加载,图片预加载就是为了在展示的时候减少图片加载过程不好的载入体验,而图片懒加载则是处于这张图片不在当前可视区域展示,为了网络带宽以及提升首次加载速度而做的优化。
图片预加载
1.img标签
如上面所列举的那些情况,就可以利用,比如用img标签与dom的background-image 来达到预加载的效果。在展示前就可以保证图片资源已经加载完成。
js Image对象
const preloadImg = (url) => {
const img = new Image();
if(img.complete) {
//图片已经加载过了,可以使用图片
//do something here
}
else {
img.onload = function() {
//图片首次加载完成,可以使用图片
//do something here
};
}
img.src = url;
}
复制代码
注意,最好是先定义onload,再赋值src,不然会出现资源返回,但是onload还没有挂载的情况。
在实际的项目我遇到过的,就是需要在某些图片加载完成再做下一步,那么这个时候,我们就需要知道某些图片序列确定是预加载完成,同样还是使用preloadImg,结合一下promise,有多个图片资源,可以用promise.all。就可以保证所有的图片加载完成再进行下一步
var promiseAll = imgData.map(function (item, index) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
img.onload = null;
resolve(img);
};
img.error = function () {
reject('图片加载失败');
};
img.src = item;
});
});
Promise.all(promiseAll).then(
function () {
// 图片全部加载完成,进行下一步
// todo
},
function (err) {
console.log(err);
}
);
复制代码
图片懒加载
所谓图片懒加载,就是延迟加载图片资源,是对网页性能的一种优化方式,比如当我们打开一个网页的时候,优先展示的图片,比如首屏图片,就先加载,而其他的图片,当需要展示的时候,再去请求图片资源,避免了首次打开时,一次性加载过多图片资源。
1.最简单的图片懒加载
同样地,我们再回顾一下文章开始讲的,如果是img标签,浏览器解析到img的src有值,就会去发起请求,那么我们就可以借助这个操作,在懒加载的图片,先不赋值,等到需要展示的时候,再赋值
const src = $('.show-img').attr('data-src');
$('.show-img').attr(src, src);
复制代码
在距离可视区域一定距离的时候加载图片
一般实际中,我们不会在需要展示的时候,才发起图片请求,不然就不会有图片预加载的需求了,那么如何判断图片在何时需要展示呢?在下拉流之类的网页中,我们一般是在图片距离可视区域的一定距离,比如50px,就开始请求图片资源
如何判断图片是否在可视区域中?
原生js判断元素是否在可视区域内,这里的可视区域的距离都是以垂直距离为准
方法一:
A: document.documentElement.clientHeight 可视窗口的高度
B: element.offsetTop dom相对于文档顶部的距离
C: document.documentElement.scrollTop 滚动条滚动的距离
B - C < A 即说明元素在可视区域内
方法二:getBoundingClientRect
const domObj = element.getBoundingClientRect();
domObj.top:元素上边到视窗上边的距离;
domObj.right:元素右边到视窗左边的距离;
domObj.bottom:元素下边到视窗上边的距离;
domObj.left:元素左边到视窗左边的距离;
const clientHeight = window.innerHeight;
当 domObj.top < clientHeight 表示dom在可视区域内了
实际应用
const preImages = $('img[data-src]').not('.pred-img');
Array.from(preImages).forEach((item) => {
if (isPreLoad(item)) {
loadImg(item);
}
});
const loadImg = (img) => {
if (!img.src) {
img.src = img.attr('data-src').addClass('pred-img');
}
};
const isPreLoad = () {
const preObj = getBoundingClientRect();
const cH = $(window).height();
return preObj <= cH + 100;
};
复制代码
代码中有二处,一处是not('.pred-img'),作为加载过的图片的标记,第二处是识别区域高度加了100,提前100px的地方就开始加载。当然在具体展示的时候,还可以给图片添加加载中的样式,以及识别图片加载异常
复制代码
_ ### jquery.lazyload 插件
require('./libs/jquery.lazyload');
addImagesLazyload();
function addImagesLazyload() {
var $images = $('.article-content img:not([data-lazyload])');
var preCount = 2;
$images.each(function(i, img) {
var $img = $(img);
var $box = $img.parent();
var src = $img.attr('data-original');
if (src && !src.match(/\?/)) {
src += '?imageView2/2/w/750';
}
$img.attr('data-lazyload', 1);
$img.off('error').on('error', function() {
$box.addClass('img-error');
});
$img.off('load').on('load', function() {
$box.removeClass('img-box img-error');
});
if (src) {
$img.attr('data-original', src);
if (i < preCount) {
img.setAttribute('src', src);
}
}
});
var $lazyed = $images.slice(preCount);
if ($lazyed.length) {
$lazyed.lazyload({ // 使用lazyload
threshold: 200 // 图片距离可视区200px的时候开始请求
});
}
}
复制代码
preCount 是加载页面的时候想要加载的图片,其他的图片就是懒加载。load 与error中就可以添加图片加载与加载失败默认显示图片
关于lazyload的配置参数如下:
placeholder : "img/img.jpg"
占位图片,此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
effect: "fadeIn"
图片加载效果, 可取值有show(直接显示),fadeIn(淡入),slideDown(下拉)
threshold: 200
滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click'
点击事件触发时才加载
值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载
ailurelimit : 10
failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题。
html页面预加载图片不出来,页面图片预加载与懒加载策略相关推荐
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
- 图片的懒加载和预加载?
一.写在前面 图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载 图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
- Jquery图片懒加载和预加载
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
- javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
- 服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
- css 同步加载,同步加载,异步加载,懒加载,预加载
同步加载 默认的就是同步加载 同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
- Vue 图片懒加载 之 Vue-Lazyload
一.什么叫懒加载 通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载. 那什么叫做需要用到的时候? 比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, ...
- 懒加载和预加载的区别
概念: 懒加载:懒加载也叫延迟加载,JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 区别: 两者的行为是相反的,预加载是 ...
- 小程序之图片懒加载[完美方案,你不来看看?]
效果图 既然来了,把妹子都给你. 定义 懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 实现原理 监 ...
最新文章
- ASP.NET超凡的代码控制
- 二进制搜索算法_使用安全摄像机镜头解释二进制搜索算法
- 《OpenSSL3.0学习之一 加密库简介|CSDN创作打卡》
- ASP.NET Core 中使用负载均衡时获取客户端 IP
- UNITY优化资料收集
- 使用ILmerge合并Exe、Dll文件的帮助类
- Arduino Uno 学习第零课,Arduino认识
- 必须正视TD-SCDMA可能存在的重大技术错误(ZT)
- 区块链火了 市场热度最么高
- 正点原子STM32F407+AD7606+RT-Thread Studio 调试记录
- 魅族l681q详细开启Usb调试模式的步骤
- TSF微服务治理实战系列(二)——服务路由
- 操作系统--(Linux)LinuxThread vs NPTL
- 2021-2022 ACM-ICPC Latin American Regional Programming Contest
- 中科院计算所职业培训中心2014年四季度课程安排
- CryptoJS 加密的使用方法
- PyQt5 主题美化
- java性能检测工具_Java自带的性能监测工具之jmap
- 静态手势识别总体方案
- 如何在Unity用ShaderGraph画一道彩虹
热门文章
- Python取整函数
- peepcode-rails2 读书笔记...
- 扑翼飞行器,是否值得研究?哪些值得去研究?有哪些生物界的启发?
- CRFNet(CameraRadarFusionNet)代码测试
- 中国种业大会落户 国稻种芯·中国水稻节:生命更健康主题
- mar计算机术语中文什么意思,MAR是什么意思?
- php的strftime先是星期几,php中strftime函数具有哪些功能呢?
- 狮子让一只豹子管理10只狼
- 【学习总结】关于vue中table表头加粗与遮挡问题
- ap pdf to html 注册码,AP PDF to IMAGE Batch Converter(PDF转JPG工具)V4.2 免费版