基于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

爱程序网

Tags：[db:关键字]