你的位置:首页 > Java教程

[Java教程]基于jQuery图片预加载ydxLazyLoad.js代码


分享一款基于jQuery图片预加载ydxLazyLoad.js代码。这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。效果图如下:

在线预览    源码下载

实现的代码。

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()        }      }); });

via:http://www.w2bc.com/article/jquery-img-ydxLazyLoad