image图片懒加载

最新推荐文章于 2024-05-30 17:38:42 发布

JIseven

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量745

点赞数

分类专栏： JavaScript 文章标签： jquery 前端 javascript imageview loadui

本文链接：https://blog.csdn.net/qq_37833745/article/details/120946692

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1:图片属性loading="lazy"延迟请求加载资源

// loading可选值: lazy(图片延迟加载) / eager(默认值，立即执行)
<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />
// MORE ...

2: 图片延迟加载jquery插件【imgLazyLoading】

此案例源码撮这里👈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="imgLazyLoading.min.js"></script>
    <script src="imgLazyLoading.js"></script>
</head>
<body>
    <div>
        <ul>
            <li style="height: 400px;">aaaad</li>
            <li style="height: 400px;">aaaad</li>
            <li style="height: 400px;">aaaad</li>
            <li style="height: 400px;">aaaad</li>
            <li style="height: 400px;">aaaad</li>
            <li style="height: 400px;">aaaad</li>
        </ul>
    </div>
    <img originalSrc="../images/5.jpg">
    <script>
     $("img").delayLoading({
        defaultImg: "../images/4.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>
</body>
</html>

3: jQuery图片延迟加载插件 jQuery.lazyload

下载插件地址1👈 下载插件地址2

npm 安装此插件链接🔗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script src="jquery.lazyload.js?v=1.9.1"></script>
</head>
<body>
    <div>
        <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="640" height="480" >
        <img class="lazy" data-original="img/bmw_m1_side.jpg" width="640" height="480">
        <img class="lazy" data-original="img/viper_1.jpg" width="640" height="480">
        <img class="lazy" data-original="img/viper_corner.jpg" width="640" height="480">
        <img class="lazy" data-original="img/bmw_m3_gt.jpg" width="640" height="480">
        <img class="lazy" data-original="img/corvette_pitstop.jpg" width="640" height="480">
    </div>
    <script type="text/javascript" charset="utf-8">
        $(function() {
            $("img.lazy").lazyload({
                threshold: 180, // 在图片距离屏幕180px时提前载入
                placeholder : "img/grey.gif", // 用一个默认图片提前占位,待图片加载时,占位图则会隐藏
                effect: "fadeIn", // 载入使用何种效果，值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
                threshold: 200, // 提前开始加载,代表页面高度.如设为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
                event: 'click',  // 事件触发时才加载，默认滚动，值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).
                // container：父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性
                container: $("#container"),  // 对某容器中的图片实现效果，lazyload默认在拉动浏览器滚动条时生效,
                                            //  这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
                failurelimit : 10 // 图片排序混乱时，lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,
                // 但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,
                // failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
            });
        });
    </script>
</body>
</html>

参考资料：

https://www.cnblogs.com/liliangel/p/6122836.html

JIseven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
image图片懒加载

1:图片属性loading="lazy"延迟请求加载资源// loading可选值: lazy(图片延迟加载) / eager(默认值，立即执行)<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />// MORE ...2: 图片延迟加载jquery插件【imgLazyLoading】此案例源码撮这里????<!DOCTYPE html><html lang="en"><head&
复制链接

扫一扫

专栏目录