图片懒加载的几种实现

最新推荐文章于 2023-08-25 17:30:25 发布

奔跑的前端er

最新推荐文章于 2023-08-25 17:30:25 发布

阅读量262

点赞数

分类专栏：网页效果实现文章标签：图片懒加载

本文链接：https://blog.csdn.net/caoxinhui521/article/details/77411343

版权

网页效果实现专栏收录该内容

0 篇文章 0 订阅

订阅专栏

图片在可视区就加载图片显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
}
.in{
    border: 1px solid black;
    margin: 10px;
    text-align: center;
    height: 400px;
    width: 400px;
    float: left;
}
.in img{
    height: 400px;
    width: 400px;
}
</style>
</head>
<body>
<ul class="list">
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "psb.jpg"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "1.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "2.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "3.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "4.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "5.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "7.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "8.png"></li>                         
    <li class="in"><img src="img/loading.gif" alt="测试" data-original = "9.png"></li>                         
</ul>

<script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
    loadImg(aImages);
};
function loadImg(arr){
    for( var i = 0,len = arr.length; i < len; i++){
        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
            arr[i].isLoad = true;
            arr[i].style.cssText = "transition: ''; opacity: 0;"
            if(arr[i].dataset){
                aftLoadImg(arr[i],arr[i].dataset.original);    
            }else{
                aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
            }
            (function(i){
                setTimeout(function(){
                    arr[i].style.cssText = "transition: 1s; opacity: 1;"
                },16)
            })(i);
        }
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}

</script>    
</body>
</html>

点击按钮显示图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
    margin: 0;
}
img{
    height: 100px;
    width: 100px;
}
</style>
</head>
<body>
<button>加载图片</button>
<img src="#" alt="测试" data-original = "img/test.png">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg = document.images[0];    
oBtn.onclick = function(){
    oImg.src = "img/loading.gif";
    if(oImg.dataset){
        aftLoadImg(oImg,oImg.dataset.original);    
    }else{
        aftLoadImg(oImg,oImg.getAttribute("data-original"));
    }
}
function aftLoadImg(obj,url){
    var oImg = new Image();
    oImg.onload = function(){
        obj.src = oImg.src;
    }
    oImg.src = url;
}
</script>    
</body>
</html>

奔跑的前端er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载的几种实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}img{ border: none;
复制链接

扫一扫