欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery图片延迟加载

程序员文章站 2023-01-13 12:42:21
一、HTML代码如下: 二、jQuery代码如下: ......

一、html代码如下:

<div class="box">
    <ul>
        <li><img originalsrc="images/1.jpg" /></li>
        <li><img originalsrc="images/2.jpg" /></li>
        <li><img originalsrc="images/3.jpg" /></li>
        <li><img originalsrc="images/4.jpg" /></li>
        <li><img originalsrc="images5.jpg" /></li>
        <li><img originalsrc="images/6.jpg" /></li>
        <li><img originalsrc="images/7.jpg" /></li>
        <li><img originalsrc="images/8.jpg" /></li>
        <li><img originalsrc="images/9.jpg" /></li>
        <li><img originalsrc="images10.jpg" /></li>
    </ul>
</div>

二、jquery代码如下:

<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/lyz.delayloading.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("img").delayloading({
        defaultimg: "images/loading.jpg",    // 预加载前显示的图片
        errorimg: "",                        // 读取图片错误时替换图片(默认:与defaultimg一样)
        imgsrcattr: "originalsrc",           // 记录图片路径的属性(默认:originalsrc,页面img的src属性也要替换为originalsrc)
        beforehand: 0,                       // 预先提前多少像素加载图片(默认:0)
        event: "scroll",                     // 触发加载图片事件(默认:scroll)
        duration: "normal",                  // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
        container: window,                   // 对象加载的位置容器(默认:window)
        success: function (imgobj) { },      // 加载图片成功后的回调函数(默认:不执行任何操作)
        error: function (imgobj) { }         // 加载图片失败后的回调函数(默认:不执行任何操作)
    });
});
</script>