1. 延迟加载的学习1

最新推荐文章于 2022-11-29 18:39:03 发布

chancejl

最新推荐文章于 2022-11-29 18:39:03 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/qq_39833794/article/details/79111320

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        font-family:Helvetica,sans-serif;
        font-size: 14px;
    }
    img{
        display: block;
        border: none;
    }
    .banner{
        margin: 10px auto;
        width: 200px;
        height: 136px;
        border: 1px solid green;
        background: url("img/timg.jpg") no-repeat center center;
    }
    .banner img{
        display: none;
        width: 100%;
        height: 100%;

    }
</style>
<body>
<div class="banner" id="banner">
    <!--trueImg是当前img标签的自定义属性，实际图片地址-->
    <img src="" trueImg="img/1.jpg"/>
</div>
<script type="text/javascript">
    var banner=document.getElementById("banner"),imgFir=banner.getElementsByTagName("img")[0];
    window.setTimeout(function(){
        //imgFir.src=imgFir.getAttribute("trueImg");
        //imgFir.style.display="block";
        //->上面方法如果图片地址有错，很难看所以要保证实际图片存在
        var oImg=new Image;
        oImg.src=imgFir.getAttribute("trueImg");
        oImg.οnlοad=function(){
            imgFir.src=this.src;
            imgFir.style.display="block";
            oImg=null;
        }
    },500);
</script>
</body>
</html>

简单的学习了图片延迟加载，需要注意是否图片格式正确，所以需要先判断是否图片格式正确后再进行加载