HTML의 이미지 사전 로딩 분석(코드 포함)-HTML 튜토리얼-php.cn

HTML의 이미지 사전 로딩 분석(코드 포함)

不言

풀어 주다： 2018-08-02 09:34:13

원래의

2901명이 탐색했습니다.

이 글은 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(&#39;control&#39;)=== "prev"){
                           index = Math.max(0,--index);
                 }else{
                           index = Math.min(len-1,++index);
                 }

                 $("#img").attr("src",imgs[index]);

        });

});

로그인 후 복사