风一样的回忆

新浪微薄腾讯微薄

最新碎语:最近开始学习俄语!!!

您的位置:风一样的回忆 >html5> 简洁的图片延时加载示例

简洁的图片延时加载示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片延时加载</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.nc_lazyload.js"></script>
    <script type="text/javascript">
        $(document).scroll(function(){
             $('img').nc_lazyload();
        }) 
    </script>
</head>
<body>
    <img id="test" src="images/1.jpg">
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/2.jpg" data-src="images/2.jpg"/>
    <img src="images/3.jpg" data-src="images/3.jpg"/>
    <img src="images/4.jpg" data-src="images/4.jpg"/>
    <img src="images/5.jpg" data-src="images/5.jpg"/>
    <img src="images/6.jpg" data-src="images/6.jpg"/>
    <img src="images/7.jpg" data-src="images/7.jpg"/>
    <img src="images/8.jpg" data-src="images/8.jpg"/>
    <img src="images/9.jpg" data-src="images/9.jpg"/>
    <img src="images/10.jpg" data-src="images/10.jpg"/>
   <img id="test" src="images/1.jpg">
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>
    <img src="images/1.jpg" data-src="images/1.jpg"/>
    <img src="images/1.jpg" data-src="images/2.jpg"/>
    <img src="images/1.jpg" data-src="images/3.jpg"/>
    <img src="images/1.jpg" data-src="images/4.jpg"/>
    <img src="images/1.jpg" data-src="images/5.jpg"/>
    <img src="images/1.jpg" data-src="images/6.jpg"/>
    <img src="images/1.jpg" data-src="images/7.jpg"/>
    <img src="images/1.jpg" data-src="images/8.jpg"/>
    <img src="images/1.jpg" data-src="images/9.jpg"/>
    <img src="images/1.jpg" data-src="images/10.jpg"/>

</body>
</html>

注:jQuery图片延时加载扩展插件代码。


// 图片延迟加载jQuery扩展
(function($) {
    $.fn.nc_lazyload = function() {
        var lazy_items = [];
        this.each(function() {
            if($(this).attr("data-src") !== undefined){
                var lazy_item = {
                    object: $(this),
                    url: $(this).attr("data-src")
                };
                lazy_items.push(lazy_item);
            }
        });

        var load_img = function() {
            var window_height = $(window).height();
            var scroll_top = $(window).scrollTop();
 
            $.each(lazy_items, function(i, lazy_item) {
                if(lazy_item.object) {
                    item_top = lazy_item.object.offset().top - scroll_top;
                    if(item_top >= 0 && item_top < window_height) {
                        if(lazy_item.url) {
                            lazy_item.object.attr("src",lazy_item.url);
                        }
                        lazy_item.object = null;
                    }
                }
            });
        };
        load_img();
        $(window).bind("scroll", load_img);
    };
})(jQuery);


演示包下载地址:链接: http://pan.baidu.com/s/1hqle6Kc 密码: kjjj

效果图:

滚动前:1.jpg

滚动后:2.jpg

---

转载请注明本文标题和链接:《简洁的图片延时加载示例

分享到:

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交