码迷,mamicode.com
首页 > 其他好文 > 详细

前端【1】-图片滚动加载

时间:2016-06-07 14:52:52      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

前面为了赶时间,拷贝了一段滚动加载的效果(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);

 

前端【1】-图片滚动加载

标签:

原文地址:http://www.cnblogs.com/godcity/p/5566622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!