HTML의 이미지 사전 로딩 분석(코드 포함)
이 글은 HTML(코드 포함)에 이미지를 미리 로드하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
HTML 페이지를 작성할 때 페이지에 그림을 추가해야 할 때 태그를 사용하여 자연스럽게 그림을 직접 삽입하는 경우가 많습니다.
하지만 사진이 많으면 문제가 발생해요. 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]);
});
});
이 경우에는 버튼을 클릭하여 이미지 표시 과정을 구현하고 싶습니다. 당연히
상자의 태그에는 사진 한 장만 넣었고(아무것도 없이 페이지가 열리는 것을 방지하기 위해) 표시할 수 있는 사진을 모두 넣지는 않았습니다. 상자. 이는 HTML 페이지를 구문 분석하기 위해 웹 브라우저에 대한 압력을 필연적으로 증가시키기 때문입니다.
이 이미지의 모든 검색 경로를 js 코드에 넣고 src 속성을 수정하여 또한 html의 데이터 속성을 사용하여 클릭 버튼 유형을 사용자 정의하고 변경 사항을 결정했습니다. js에서 이 데이터 값을 가져와서 이미지 경로를 만듭니다.
이러한 구현은 HTML 페이지를 구문 분석하는 동안 브라우저 파서의 부담을 줄이는 데 더 도움이 됩니다.
추천 관련 기사:
html의 기본 구조를 간략하게 설명하는 방법(코드 포함)
HTML의 메타 정보 메타 태그 속성 분석(코드 포함)
위 내용은 HTML의 이미지 사전 로딩 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7547
15
1382
52
83
11
57
19
22
90
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
