图片预加载 为什么使用图片预加载 为什么会考虑使用图片预加载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方
为什么会考虑使用图片预加载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你。
它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。
下面整理常用的图片预加载:
body:after {
content: "";
display: block;
position: absolute;
background:
url("../image/manage/help/01.png") no-repeat -10000px -1000px,
url("../image/manage/help/02.png") no-repeat -10000px -1000px,
url("../image/manage/help/03.png") no-repeat -10000px -1000px,
url("../image/manage/help/04.png") no-repeat -10000px -1000px,
url("../image/manage/help/05.png") no-repeat -10000px -1000px,
width: 0;
height: 0
}
(function(){
var imgSrcArr = [
'image/1.png',
'image/2.png',
'image/3.png',
'image/4.png',
'image/5.png',
'image/6.png',
'image/7.png'
];
var imgWrap = [];
function preloadImg(arr) {
for(var i =0; i< arr.length ;i++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
setTimeout(function(){preloadImg(imgSrcArr)},5000)
}());
css
.preload-img:after{
content: "";
display: block;
position: absolute;
background:
url("../image/manage/help/01.png") no-repeat -10000px -1000px,
url("../image/manage/help/02.png") no-repeat -10000px -1000px,
url("../image/manage/help/03.png") no-repeat -10000px -1000px,
url("../image/manage/help/04.png") no-repeat -10000px -1000px,
url("../image/manage/help/05.png") no-repeat -10000px -1000px,
width: 0;
height: 0
}
js
$("#target").addClass("preload-img")
工作中经常会遇到将背景图切为三个部分: 上部、中部、下部。
上部和下部:上部和下部使用容器的多背景图实现。
中部:使用绝对定位容器的方式解决。
html部分:
<section class="content-wrap">
<div class="line-wrap">
</div>
<p>我是内容</p>
</section>
css部分:
.content-wrap{
position: relative;
background:url('/images/top-bg.png') left top no-repeat,
url('/images/bottom-bg.png') left bottom no-repeat;
background-size:100% auto;
.line-wrap{
position: absolute;left:0;top:4.8rem;bottom:2.73rem;z-index:-1;
width:100%;
background:url('/images/middle-bg.png') left top repeat-y;
background-size:100% auto;
}
}
--结束END--
本文标题: JS+CSS实现图片预加载与背景图上中下切图
本文链接: https://www.lsjlt.com/news/153079.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0