前端-图片滚动加载

Posted 2020-07-22 上帝之城

前面为了赶时间，拷贝了一段滚动加载的效果（http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html），结果列表一长，导致页面其他脚本执行非常缓慢，造成很大的性能问题，最后忍无可忍，决定自己重新编码。思路是给列表上每20行编为一个区间，监听页面滚动事件，一旦下一个区间即将可见，加载下一个区间的图片，这样如果不是滚动很快的话，基本上看不到过渡图片的，运行下来，结果让人满意，除了往上滚动等问题没有考虑之外，基本上没有问题了。

    var positions = [];//标记位置
    var flags = [];//标记是否已经加载
    function initialPositions() {
        for (var i = 20, len = @(Model.Data.Count); i <= len; i+=20) {
            var item = document.getElementById("item" + i);
            positions.push(item.getBoundingClientRect().top);
            flags.push(false);
        }

        //判断是否有余数
        if(@(Model.Data.Count) % 20 >= 1){
            flags.push(false);//增加一个区间
        }
    }
    initialPositions();

    window.addEventListener("scroll",function(){
        var pos = document.body.scrollTop;

        //判断当前区间
        for (var i = 0, len=positions.length; i < len; i++) {
            if(positions[i] >= pos){
                break;
            }
        }

        loadSection(i);
        loadSection(i+1);
    });

    function loadSection(current){
        //判断当前区间是否已经加载
        if(flags[current] == false){
            for (var i = 1; i <= 20; i++) {
                var head = document.getElementById("head" + (20*current+i));
                if(head){
                    var attrSrc = head.getAttribute("xsrc");
                    head.setAttribute("src", attrSrc);
                }
            }

            flags[current] = true;
        }
    }
    loadSection(0);