html完成圖片預(yù)加載的區(qū)分（附代碼）
發(fā)表時(shí)間：2023-09-07 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章給大家介紹的內(nèi)容是關(guān)于html實(shí)現(xiàn)圖片預(yù)加載的分析（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。很多時(shí)候，我們?cè)趯?xiě)html頁(yè)面的時(shí)候，當(dāng)需要在頁(yè)面中加入圖片時(shí)，我們很自然地把圖片直接用<img>標(biāo)簽放在了<body>里面，這本來(lái)是沒(méi)有多大...
這篇文章給大家介紹的內(nèi)容是關(guān)于html實(shí)現(xiàn)圖片預(yù)加載的分析（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
很多時(shí)候，我們?cè)趯?xiě)html頁(yè)面的時(shí)候，當(dāng)需要在頁(yè)面中加入圖片時(shí)，我們很自然地把圖片直接用<img>標(biāo)簽放在了<body>里面，這本來(lái)是沒(méi)有多大問(wèn)題的。
但是當(dāng)圖片數(shù)量很多的時(shí)候，問(wèn)題就來(lái)了。Html頁(yè)面在被解析器解析的時(shí)候要不斷去尋找圖片的路徑去加載圖片，而這些圖片不一定所以都會(huì)被用戶(hù)通過(guò)觸發(fā)一些類(lèi)似點(diǎn)擊的操作所看到。這樣，一些不必要的圖片預(yù)加載就會(huì)拉長(zhǎng)了頁(yè)面的加載時(shí)間，帶來(lái)的用戶(hù)體驗(yàn)是不好的。
為了解決這個(gè)性能問(wèn)題，有一個(gè)比較好的解決問(wèn)題就是用js去延遲圖片預(yù)加載。那么具體的實(shí)現(xiàn)過(guò)程是怎樣的呢？
我先把我實(shí)現(xiàn)的代碼放在下面：
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title><style>
body{position:relative;text-decoration: none;list-style: none;}
.showpic{position:absolute;height:550px;width:90%;margin-left:80px;background-color: black;}
.button-box{position: absolute;margin-top:560px;margin-left: 600px;z-index: 5;}
.preload{position: fixed;height: 100%;width:100%;top:0;background-color: white;display: none;}
img{position: absolute;margin-left: 30px;margin-top: 3px;}
button{height: 30px;width:80px;font-size: 10px;}</style><script src="https://code.jquery.com/jquery-1.12.4.js"></script></head><body>
<p class="showpic">
<img src="img/pexels-photo-297814.jpeg" id="img">
</p>
<p class="button-box">
<button type="button" value="前一張" data-control="prev" class="button">前一張</button>
<button type="button" value="后一張" data-control="next" class="button">后一張</button>
</p>
<p class="preload"></p><script type="text/javascript" src="js/preload.js"></script></body></html>$(document).ready(function(){
var imgs = ["img/pexels-photo-297814.jpeg",
"img/pexels-photo-465445.jpeg",
"img/pexels-photo-619948.jpeg",
"img/pexels-photo-620336.jpeg",
"img/pexels-photo-885746.jpeg",
"img/pexels-photo-886109.jpeg",
"img/pexels-photo-888994.jpeg"];
var index = 0,
len =imgs.length;
$(".button").on("click",function(){
if($(this).data('control')=== "prev"){
index = Math.max(0,--index);
}else{
index = Math.min(len-1,++index);
}
$("#img").attr("src",imgs[index]);
});
});
這個(gè)案例我是要實(shí)現(xiàn)通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)圖片的展示過(guò)程。顯然，我在<p class="showpic">盒子的<img>標(biāo)簽里面只是放了一張圖片（避免頁(yè)面打開(kāi)是什么也沒(méi)有），并沒(méi)有把全部可以展示的圖片都放在盒子里面。因?yàn)檫@樣勢(shì)必會(huì)加大web瀏覽器解析html頁(yè)面的壓力。
我把這些圖片的所有搜索路徑的放在了js代碼中，并通過(guò)修改src屬性的方法來(lái)更新<img>標(biāo)簽，其中我還用到了html的data屬性來(lái)自定義點(diǎn)擊按鈕的類(lèi)型，并通過(guò)在js中獲取這個(gè)data值來(lái)確定圖片路徑的更改。
這樣的實(shí)現(xiàn)，就比較有利于減輕html頁(yè)面解析過(guò)程中對(duì)瀏覽器解析器的壓力。
相關(guān)文章推薦：
如何來(lái)簡(jiǎn)述html的基本結(jié)構(gòu)（附代碼）
HTML中元信息meta標(biāo)記屬性的分析（附代碼）
以上就是html實(shí)現(xiàn)圖片預(yù)加載的分析（附代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
