jQuery réalise le préchargement de l'image effect_jquery

L'exemple de cet article décrit le code jQuery pour implémenter les effets de préchargement d'images. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

code 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>

code js :

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

Vous verrez cet effet lors du chargement des images. Vous connaissez maintenant le processus d'implémentation. J'espère que vous aimerez l'effet de préchargement d'image jQuery partagé par l'éditeur.