jQuery는 이미지 사전 로딩 effect_jquery를 달성합니다.

이 기사의 예에서는 이미지 사전 로딩 효과를 구현하는 jQuery 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

html 코드:

<div class="main">
  <br>
  <div class="title">图片预加载</div>
  <div class="content">
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/1.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/2.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/3.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/4.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/5.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
   <div class="img">
    <a href="">
     <img lazyloadsrc="images/6.jpg" alt="" width="200" height="120">
    </a>
    <span class="loading"></span>
   </div>
  </div>
 </div>

js 코드:

 $(function () {
   $("[lazyLoadSrc]").YdxLazyLoad({
    onShow: function () {
     $(this).parent().next().hide()
    }
   });
 });

이제 이미지를 로드할 때 이 효과를 볼 수 있습니다. 이제 편집기에서 공유하는 jQuery 이미지 미리 로드 효과가 마음에 드셨기를 바랍니다.