JS+CSS實現(xiàn)圖片預加載與背景圖上中下切圖
更新時間：2022年06月30日 11:13:12 作者：小旭2021
這篇文章介紹了JS+CSS實現(xiàn)圖片預加載與背景圖上中下切圖的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
圖片預加載
為什么使用圖片預加載
為什么會考慮使用圖片預加載呢？你是否曾有個網(wǎng)站，在那個網(wǎng)站你要滾動你的導航然后有個延遲直到圖片被加載完……預加載將在這方面幫助你。
它將在頁面加載的時候加載那些圖片并將其存儲在瀏覽器的緩存里面。這樣當用戶滾動導航的時候，很漂亮而且流暢，沒有延遲。
下面整理常用的圖片預加載：
1.使用純的css進行圖片預加載
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
}2.使用純javascript進行圖片預加載
(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)
}());3.使用css+js方式進行圖片預加載
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")背景圖上中下切圖方案
工作中經(jīng)常會遇到將背景圖切為三個部分： 上部、中部、下部。
上部和下部：上部和下部使用容器的多背景圖實現(xiàn)。
中部：使用絕對定位容器的方式解決。
html部分：
<section class="content-wrap">
<div class="line-wrap">
</div>
<p>我是內(nèi)容</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;
}
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
迷上jQuery,相對于原生JavaScript,它是如此的美妙.也因此,促使我更加的努力的研習原生JavaScript.2010-07-07
本文給大家分享的是使用jquery實現(xiàn)的全選刪除插件的代碼，非常的實用，本文示例是結合的ThinkPHP,小伙伴們可以自由擴展。2015-03-03
jQuery解析XML與傳統(tǒng)JavaScript方法的差別實例分析
這篇文章主要介紹了jQuery解析XML與傳統(tǒng)JavaScript方法的差別,實例分析了jQuery與javascript解析XML文件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
修復 jQuery 中 isFunction 方法的 BUG2010-01-01
jQuery插件slick實現(xiàn)響應式移動端幻燈片圖片切換特效
jQuery插件slick是一款響應式、適用于移動設備觸摸屏、可滑動顯示的jQuery幻燈片插件。該幻燈片插件可以設置多種顯示效果，可以自動播放，是一款移動優(yōu)先的jQuery幻燈片插件。2015-04-04
這篇文章主要介紹了jQuery中element選擇器用法,實例分析了element選擇器的功能、定義及相關的操作技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jquery插件豐富，很多都是很好用的，最近學習了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實很簡單，這里介紹一下。2010-06-06
jQuery Real Person驗證碼插件防止表單自動提交
這篇文章為大家介紹了一款jQuery驗證碼插件Real Person，可以防止自動提交表單2015-11-11
Javascript 鏈式調(diào)用實現(xiàn)代碼(參考jquery)
謂的鏈式調(diào)用無非是一個語法技巧而已，我就學Jquery寫了一個粗淺的庫。2010-05-05
今天看到javaeye上有人使用了jqGrid實現(xiàn)了數(shù)據(jù)的分頁，參考它的代碼，實現(xiàn)了這個功能，搬出來曬曬，作為自己以后學習的資料2011-11-11