前端首屏懒加载

最新推荐文章于 2023-03-27 08:07:33 发布

未来aaa

最新推荐文章于 2023-03-27 08:07:33 发布

阅读量512

点赞数

分类专栏：前端 html5 css3 文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/weilai_a/article/details/122461118

版权

首先咱们来说一下什么是懒加载。

个人理解懒加载也就是惰性加载，即需要的时候再加载出来，不需要时就不加载，避免了浏览器资源的浪费。

懒加载的原理：

1.将真实的图片地址保存到自定义属性中，不给到图片的src,并且将该节点隐藏。

2.创建一个临时图片节点，用来判断资源能否加载成功。能够加载成功就展示图片

懒加载作用（优点）：

1.防止图片加载不成功出现破图。

2.页面中资源很多，只有用户到达当前位置才开始加载资源。有效的避免了浏览器资源的浪费，有利于性能优化。

  <title>图片懒加载</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       #box{
           width: 300px;
           height: 300px;
           margin: 50px auto;
           background: url(./img/3.jpg) center no-repeat ;
       }
        .my{
            width: 300px;
            height: 300px;
            display: none;
           
        }
    </style>
</head>
<body>
    <div id="box">
        <img class="my" src="" ziarr="./img/2.jpg" alt="&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

未来aaa

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端首屏懒加载

<title>图片懒加载</title> <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; margin: 50px auto; background: url(./img/3.jpg) ...
复制链接

扫一扫