jQuery实现图片预加载效果

时间：2022-05-02 10:40:47|栏目：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图片加载方法汇总》，欢迎大家学习阅读。

大家在加载图片时就会看到这种效果，现在知道是实现的过程了吧，希望大家喜欢小编分享的jQuery实现图片预加载效果。

上一篇：jquery 属性选择器（匹配具有指定属性的元素）

栏目：jquery

下一篇：jQuery实现嵌套选项卡功能

本文标题：jQuery实现图片预加载效果

本文地址：http://www.codeinn.net/misctech/200809.html

更多jquery

jquery

jQuery实现图片预加载效果

阅读排行

推荐教程