滚屏异步加载图片

Posted 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚屏异步加载图片相关的知识，希望对你有一定的参考价值。

 

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
    </style>
</head>
<body>
<div id="image">
</div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.js"></script>
<!--<script src="js/jquery.lazyload.js"></script>-->
<script>

    (function($){
        //alert($.fn.scrollLoading);
        $.fn.scrollLoading = function(options) {
            var defaults = {
                attr: "data-url"
            };
            var params = $.extend(
                    {},
                    defaults,
                    options || {}
            );
            params.cache = [];
            //$(this) 指的是 调用者(‘.scrollLoading‘);
            //console.log($(this).attr(‘class‘));
            $(this).each(function() {
                var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
                if(!url) {
                    return;
                }
                var data = {
                    obj: $(this),
                    tag: node,
                    url: url
                };
                params.cache.push(data);
            });

            var loading = function(){
                var st = $(window).scrollTop(), sth = st + $(window).height();
                $.each(params.cache, function(i, data){
                    var o = data.obj, tag = data.tag, url = data.url;
                    if(o) {
                        post = o.position().top; posb = post + o.height();
                        if((post > st && post < sth) || (posb > st && posb < sth)) {
                            if(tag === "img") {
                                o.attr("src", url);
                            } else {
                                o.load(url);
                            }
                            data.obj = null;
                        }
                    }
                });
                return false;
            };

            loading();
            $(window).bind("scroll", loading);
        }
    })(jQuery);
</script>

<script>
    var imgArr = "";
    for (var i = 1; i <= 25; i++) {
        if (i <= 25) {//因上传到17素材超过规定大小，不得不将过多的图片略去，为了达到更好的效果，可以自行修改此循环代码，并且增加其余图片，体验异步加载
            imgArr += ‘<img class="scrollLoading" data-url="image/‘ + i + ‘.jpg" src="image/grey.gif" />‘;
        } else {
            imgArr += ‘<img class="scrollLoading" data-url="image/13.jpg" src="image/grey.gif" />‘;  //超过26张后显示的图片
        }
    }
    $("#image").append(imgArr);
    $("img").load(function () {
        //图片默认隐藏
        $(this).hide();
        //使用fadeIn特效
        $(this).stop().fadeIn("5000");
    });
//    // 异步加载图片，实现逐屏加载图片
    $(".scrollLoading").scrollLoading();

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

 

以上是关于滚屏异步加载图片的主要内容，如果未能解决你的问题，请参考以下文章

滚屏加载

当活动中的异步任务完成时如何在片段中重新加载ui？

如何延迟或异步此 WordPress javascript 片段以最后加载以加快页面加载时间？

异步任务片段背景数据

js怎么异步加载loading

AsyncTask实现网络图片的异步加载