js图片加载

1.图片对象事件

1.onerror

 img.onerror = function(){
 图片对象加载失败后   自动调用
  }

2.onload

img.onload = function(){
图片对象加载成功后   自动调用
}

浏览器有缓存机制
加快资源访问速度 降低服务器压力

2.延迟加载

<!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>延迟加载</title>
</head>

<img src=alt="">
<img src=alt="">
<img src=alt="">
<img src=alt="">
<img src=alt="">
<img src=alt="">

<body>

    <!-- 延迟加载 -->

    <script>
     options
     src:图片路径
     loadsrc：加载时候的路径
      errsrc:404时候的路径

        function dalayLoadImg(options) {
        //设置loading  图
        //如果实参中  有 loadSrc 则执行  实参
        //如果没有  则执行  默认路径
        options.imgs.src = options.loadSrc || '../img/loding.gif';

            // 创建一个 临时 下载图片的images对象
            var img = new Image();
            // 给临时 图片  设置   真实的路径
            img.src = options.setSrc;
            // 给临时 图片  绑定  onload  事件
            img.onload = function () {
                // 将真实的地址   传给 options 中的   images 图片对象
            options.imgs.src = this, src;
            }

            // 如果加载失败  绑定onerror
             img.onerror = function () {
                // 配置一张  404 图片
             options.imgs.src = options.errSrc || '../img/404.jpeg';
            }
        }

        var arr = [
            "../img/src=http___ci.xiaohongshu.com_3d51623a-71bd-c9d4-b262-a3e4e8b81509_imageView2_2_w_1080_format_jpg&refer=http___ci.xiaohongshu.jfif",
            "../img/src=http___img3.doubanio.com_view_group_topic_l_public_p302453273.jpg&refer=http___img3.doubanio.jfif",
            "../img/src=http___ww1.sinaimg.cn_mw690_007T9BhIgy1gtqd25204wj30u018zq7v.jpg&refer=http___www.sina.jfif",
            "../img/src=http___nimg.ws.126.net__url=http%3A%2F%2Fdingyue.ws.126.net%2F1Yr7A6HIuKq6bHaJBmysc28zY8KGHZWGqIAxWpr6LJRQS1625382066375.jpeg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg..jfif",
            "../img/src=http___nimg.ws.126.net__url=http___dingyue.ws.126.net_2021_0421_a2956266j00qrvkao005rc000ss00xyc.jpg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg.ws.126.jfif",
            "../img/src=http___p0.itc.cn_images01_20210921_2d5401e7e5184f079de47b63bd21a79a.jpeg&refer=http___p0.itc.jfif",
            "../img/src=http___pic1.zhimg.com_50_v2-b89d9cd17e801c7543d9903236cbcaf6_hd.jpg&refer=http___pic1.zhimg.jfif",
            "../img/src=http___ww2.sinaimg.cn_mw690_007gDeSNgy1gtt7v7hapzj60hn0hnac802.jpg&refer=http___www.sina.jfif",
            "../img/src=http___wx3.sinaimg.cn_mw690_c3dab170ly1gttal7nlgej20go0mvdhh.jpg&refer=http___wx3.sinaimg.jfif",
            "../img/src=http___wx4.sinaimg.cn_mw690_002GNXDPgy1gtt8xndd7oj61jj12ktv302.jpg&refer=http___wx4.sinaimg.jfif",
        ]





        // 创建图片对象
        var img = new Image();

        // 调用预加载方法   实参是一个json
        dalayLoadImg({
            imgs: img,
            setSrc: 'http://placehold/380x300',
            loadSrc: '',
            errSrc: '',
        })
    </script>
</body>



</html>

3. 图片的预加载

<!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>图片的预加载</title>
</head>

<body>

    <script>
        var arr = [
            "../img/src=http___ci.xiaohongshu.com_3d51623a-71bd-c9d4-b262-a3e4e8b81509_imageView2_2_w_1080_format_jpg&refer=http___ci.xiaohongshu.jfif",
            "../img/src=http___img3.doubanio.com_view_group_topic_l_public_p302453273.jpg&refer=http___img3.doubanio.jfif",
            "../img/src=http___ww1.sinaimg.cn_mw690_007T9BhIgy1gtqd25204wj30u018zq7v.jpg&refer=http___www.sina.jfif",
            "../img/src=http___nimg.ws.126.net__url=http%3A%2F%2Fdingyue.ws.126.net%2F1Yr7A6HIuKq6bHaJBmysc28zY8KGHZWGqIAxWpr6LJRQS1625382066375.jpeg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg..jfif",
            "../img/src=http___nimg.ws.126.net__url=http___dingyue.ws.126.net_2021_0421_a2956266j00qrvkao005rc000ss00xyc.jpg&thumbnail=650x2147483647&quality=80&type=jpg&refer=http___nimg.ws.126.jfif",
            "../img/src=http___p0.itc.cn_images01_20210921_2d5401e7e5184f079de47b63bd21a79a.jpeg&refer=http___p0.itc.jfif",
            "../img/src=http___pic1.zhimg.com_50_v2-b89d9cd17e801c7543d9903236cbcaf6_hd.jpg&refer=http___pic1.zhimg.jfif",
            "../img/src=http___ww2.sinaimg.cn_mw690_007gDeSNgy1gtt7v7hapzj60hn0hnac802.jpg&refer=http___www.sina.jfif",
            "../img/src=http___wx3.sinaimg.cn_mw690_c3dab170ly1gttal7nlgej20go0mvdhh.jpg&refer=http___wx3.sinaimg.jfif",
            "../img/src=http___wx4.sinaimg.cn_mw690_002GNXDPgy1gtt8xndd7oj61jj12ktv302.jpg&refer=http___wx4.sinaimg.jfif",
        ]


        function preLoad(options) {
            // 定义一个数组
            // 用来接听  所有  加载完毕的  图片对象
            var imgObj = [];

            // 定义一个变量  保存   数据的长度
            var total = options.data.length;
            // 定义一个变量  作为 计时器
            var cont = 0;

            // 遍历数据源  动态创建    img对象
            for (var i = 0; i < total; i++) {
                // 创建img对象
                var img = new Image();
                // 设置 src
                img.src = options.data[i];
                // 将已经设置好的 img 添加到   imgObj 中
                imgObj.push(img);
                img.onload = function () {
                    // 计数器自增
                    cont++;
                    // 记录过程
                    // 调用 options.each() 方法
                    options.each(cont, total);
                    // 判断是否结束
                    if (cont == total) {
                        // 所有图片  全部加载完毕
                        // 输出数据
                        options.success(imgObj);
                    }

                }
            }
        }

        preLoad({
            data: arrImg,
            // 记录图片加载过程
            each: function (cont, total) {
                console.log(cont, total);
            },
            success: function (res) { //     res结果
                // 全部加载
                console.log(res);
            }
        })
    </script>
</body>

</html>

4.懒加载

原理：
通过页面加载开始 先给图片对象一个 占位图
将实际的图片属性 放在自定义属性 data_url 里面

<!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>懒加载</title>
    <style>
        .box{
            width: 100%;
            height: 1000px;
            background-color: bisque;
        }
    </style>
</head>

<body>
<div class="box"></div>
<img src="../img/src=http___ci.xiaohongshu.com_3d51623a-71bd-c9d4-b262-a3e4e8b81509_imageView2_2_w_1080_format_jpg&refer=http___ci.xiaohongshu.jfif"    data_url="http://placehold.it/380x300"          alt="">
    <script>
        // 图片懒加载    是前段常用优化手段之一


        // 通过onscroll事件，检测图片的位置
        // 如果图片进入到浏览器可视区域
        // 将data_url   的实际图片  设置给src


        // 检测的方法
        // 图片距离文档顶部的距离 - scrollTop <浏览器可视区域高度                （scrollTop）滚动条高度

        // 声明一个函数  获取盒子到文档边缘之间的距离
        function getXY(ele) {

            // 定义一个变量   保存盒子到文档左边缘的距离
            var getLeft = 0;

            // 判断  图片是否有定位
            if (ele.offsetParent) {
                // offsetParent 查找  距离该子元素  最近的  进行过定位的父元素
                getLeft += ele.offsetLeft + ele.offsetParent.clientLeft;
            } else {
                getLeft += ele.offsetLeft;
            }



            // 将body的边框减掉
            getLeft -= document.body.clientLeft;



            // 定义一个变量   保存盒子到文档顶部的距离
            var getTop = 0;
            if (ele.offsetParent) {
                getTop += ele.offsetTop + ele.offsetParent.clientTop;
            } else {
                getTop += ele.offsetTop;
            }
            getTop -= document.body.clientTop;


            return {
                getTop,
                getLeft,
            }

        }

        window.onscroll = function () {
            var img = document.getElementsByClassName('imgs');
            if (img.src == img.getAttribute('data_url')) return;


            // 获取当前的scrollTop
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
            // 获取当前的scrollLeft
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;

            // 浏览器的可视高度
            var winY = document.documentElement.clientHeight;
            //浏览器的可视宽度
            var winX = document.documentElement.clientWidth;
            // 获取标签到文档顶部的距离
            var getTop = getXY(img).getTop;
            // 获取标签到文档左边的距离
            var getLeft = getXY(img).getLeft;

            //  垂直方向判断
            var resY = (getTop - scrollTop) < winY;
            // 水平方向的距离
            var resX = (getLeft - scrollLeft) < winX;
            if(resX && resY){
                img.src = img.getAttribute("data_url")
            }
        }
    </script>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • js图片加载
    1. 懒加载 原理：通过页面加载开始，先给图片一个占位图，将实际图片属性，放在自定义属性data_url里面，通过...
    晴空0_0阅读 869评论 0赞 0
  • 原生js实现图片懒加载
    懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加...
    罗不遇阅读 818评论 0赞 2
  • 【JS】图片预加载--无序加载网站loading
    课程前言： 慕课网 --图片预加载 图片预加载的特点： （ 1、网站的Loading页 2、局部图片的加载--表情...
    一树青枫阅读 3,727评论 0赞 2
  • 原生 JS 实现最简单的图片懒加载
    懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区...
    grain先森阅读 2,649评论 0赞 79
  • js 图片预加载
    JS 实现图片的预加载（转载） 图片预加载是web开发中一种应用相当广泛的技术，比如我们在做图片翻转显示等特效的时...
    straightwood阅读 1,757评论 0赞 0