网站图片延时加载2.0

来源：互联网发布：大数据 a股编辑：程序博客网时间：2024/06/05 18:31

网站上有很多图片的时候就会加载速度很慢（如果3S内首页打不开，已经算是死亡页面）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片延迟加载/懒加载</title>    <style type="text/css">        * {            margin: 0;            padding: 0;            font-family: 微软雅黑;            font-size: 14px;        }        .banner {            margin: 10px auto;            width: 790px;            height: 800px;            border: 1px solid green;            background: url(http://oucm2v3sy.bkt.clouddn.com/%E9%A4%90%E9%A5%AE.png) no-repeat center center #e1e1e1;        }        .banner img {            display: none;            width: 100%;            height: 100%;        }    </style></head><body><div class="banner">    <img id="jd" trueImg=" http://oucm2v3sy.bkt.clouddn.com/01.png" src="" alt=""></div><script>    window.onload = function () {        var oImg = document.createElement('img');        var jd = document.getElementById('jd');        var src = jd.getAttribute('trueImg');        var oImg = new Image();        oImg.src = src;        //图片能够正常加载        oImg.onload = function(){            jd.src = src;            jd.style.display = 'block';            oImg = null;            var nowTime = new Date();            console.log('图片加载完成，耗时'+(nowTime - time)+' ms');        }        console.log('图片加载中......');        var time = new Date();    }</script></body></html>

阅读全文

0 0