jQuery实现图片预加载效果

前端技术 2023/09/02 JavaScript

本文实例讲述了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实现图片预加载效果。

本文地址：https://www.stayed.cn/item/5175

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案