HTML의 이미지 사전 로딩 분석(코드 포함)
- 不言원래의
- 2018-08-02 09:34:132955검색
이 글은 HTML(코드 포함)에 이미지를 미리 로드하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
HTML 페이지를 작성할 때 페이지에 그림을 추가해야 할 때 a1f02c36ba31691bcfe87b2722de723b 태그를 사용하여 자연스럽게 그림을 직접 삽입하는 경우가 많습니다.
하지만 사진이 많으면 문제가 발생해요. HTML 페이지가 파서에 의해 구문 분석될 때 이미지를 로드하기 위해 지속적으로 이미지 경로를 찾아야 하며 이러한 이미지는 일부 클릭과 유사한 작업을 트리거하여 사용자에게 반드시 표시되지 않을 수도 있습니다. 이러한 방식으로 일부 불필요한 이미지를 미리 로드하면 페이지 로딩 시간이 길어지고 사용자 경험이 저하됩니다.
이 성능 문제를 해결하기 위한 더 나은 해결책은 js를 사용하여 이미지 사전 로드를 지연시키는 것입니다. 그렇다면 구체적인 구현 프로세스는 무엇입니까?
먼저 제가 구현한 코드를 아래에 넣어보겠습니다.
<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]);
});
});
이 경우에는 버튼을 클릭하여 이미지 표시 과정을 구현하고 싶습니다. 당연히 6ffcb40369b851f71b47260865168208 상자의 a1f02c36ba31691bcfe87b2722de723b 태그에는 사진 한 장만 넣었고(아무것도 없이 페이지가 열리는 것을 방지하기 위해) 표시할 수 있는 사진을 모두 넣지는 않았습니다. 상자. 이는 HTML 페이지를 구문 분석하기 위해 웹 브라우저에 대한 압력을 필연적으로 증가시키기 때문입니다.
이 이미지의 모든 검색 경로를 js 코드에 넣고 src 속성을 수정하여 a1f02c36ba31691bcfe87b2722de723b 또한 html의 데이터 속성을 사용하여 클릭 버튼 유형을 사용자 정의하고 변경 사항을 결정했습니다. js에서 이 데이터 값을 가져와서 이미지 경로를 만듭니다.
이러한 구현은 HTML 페이지를 구문 분석하는 동안 브라우저 파서의 부담을 줄이는 데 더 도움이 됩니다.
추천 관련 기사:
html의 기본 구조를 간략하게 설명하는 방법(코드 포함)
HTML의 메타 정보 메타 태그 속성 분석(코드 포함)
위 내용은 HTML의 이미지 사전 로딩 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!