懒加载图片

最新推荐文章于 2024-05-30 17:38:42 发布

xyphf_和派孔明

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量395

点赞数

分类专栏：常用特效 DOM&BOM操作

本文链接：https://blog.csdn.net/xyphf/article/details/52728927

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

常用特效

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>懒加载图片</title>
<style>
div{ margin-top:300px; width:470px; height:150px; border:1px #000 solid;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){  
    toChange();
    $(window).scroll(toChange);
    function toChange(){        
        $('img').each(function(i,elem){            
            if( $(elem).offset().top < $(window).height() + $(window).scrollTop() ){              
                $(elem).attr('src',$(elem).attr('_src'));              
            }           
        });     
    }   
});
</script>
</head>

<body>
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
</body>
</html>