图片预加载
图片 加载
2023-09-11 14:21:35 时间
隐藏元素的背景图是不会一开始就加载的,只有显示的时候才会加载,所以为了避免显示的时候加载延时,就可以采用图片预加载,浏览器渲染的时候只要图片加载过一次,就会从缓存中取得,所以在图片真正使用的之前进行一次预加载;
在开发的过程,我们经常会遇到这样的要求,当鼠标hover上去的时候,更改菜单的背景。如果没有进行图片预加载的话,会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况?因为hover的时候,图片才会去加载。那么我们现在来解决这个问题。
首先我们要知道一点:如果图片在使用之前就已经请求过了,那么再次使用的时候,就不会再去请求(ps:图片路径一样)。下面讲实现方式
1.使用纯的css进行图片预加载
body:after {
content: "";
display: block;
position: absolute;
background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;
width: 0;
height: 0
}
原理是加载了该图片,但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点,图片跟随文档一同加载,有时候我们为了提高文档的加载速度,那么这种方式方式就不适合了。
2.使用纯javascript进行图片预加载
//存放图片路径的数组
var imgSrcArr = [
'imgsrc1',
'imgsrc2',
'imgsrc3',
'imgsrc4'
];
var imgWrap = [];
function preloadImg(arr) {
for(var i =0; i< arr.length ;i++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
preloadImg(imgSrcArr);
//或者延迟的文档加载完毕在加载图片
$(function () {
preloadImg(imgSrcArr);
})
3.使用css+js方式进行图片预加载
.preload-img:after{
content:"",
background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;
}
/*
比如我们写了上面的这样一个类,但是页面中没有用到,我们在文档加载完毕之后,给某个元素添加该类
*/
$(function(){
$("#target").addClass("preload-img")
})
4.使用ajax方式进行图片预加载
$(function(){
$.get('图片的路径');
})
/*
当然我们也可以写成一个函数,这里我就不演示了
*/
相关文章
- 绕过网站WAF(图片绕过)
- java处理图片--图片的缩放,旋转和马赛克化
- Python处理超强反爬(TSec防火墙+CSS图片背景偏移定位)
- 网页背景图片随机
- Android的屏幕适配之图片加载适配
- 第十五届全国大学生智能车竞赛相关LOGO,文化衫,背板图片
- eggjs 实现 删除 服务端上传的图片
- 懒加载(js+图片+路由)
- ImageView显示不出来图片
- listview加载网络图片
- 通用图片加载组件UniversalImageLoader
- Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传
- 图片加载之Picasso使用
- android图像处理系列之五-- 给图片添加边框(中)
- Android使用BitmapFactory.Options解决加载大图片内存溢出问题
- Android 高清加载巨图方案 拒绝压缩图片
- Android高效异步图片加载框架
- 妹子图APP(一)—— Retrofit+Glide+Gson加载网络图片
- Tensorflow生成自己的图片数据集TFrecords(支持多标签label)
- kindeditor上传图片的大小在哪控制
- 图片懒加载lazyload.js详解
- java实现给图片添加水印(文字水印或图片水印)
- listview 异步加载图片并防止错位
- CSS3实现的图片加载动画效果
- Python 爬虫 之 爬取王者荣耀的英雄们所有大皮肤图片,并 json 形式保存英雄列表信息到本地
- Android框架Volley之:利用Imageloader和NetWorkImageView加载图片
- Qt Load and Save Image Dialog 加载图片对话框
- html img图片模糊效果
- 探索图片懒加载的最佳实践及封装一个懒加载插件