基于jQuery图片预加载ydxLazyLoad.js代码

2024-04-27 15:02:50

字体：大中小

来源：转载

供稿：网友

分享一款基于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

上一篇：整理了一些jQuery关于事件冒泡和事件委托的技巧

下一篇：整理了一些常用的jQuery动画事件