zoukankan      html  css  js  c++  java
  • 前端【1】-图片滚动加载

    前面为了赶时间,拷贝了一段滚动加载的效果(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);
  • 相关阅读:
    人生感悟:人与人之间的距离
    9月22日测试题目
    Java自学第五十二天
    Java自学第五十一天
    Java自学第五十天
    Java自学第四十九天
    Java自学第四十八天
    Java自学第四十七天
    Java自学第四十六天
    Java自学第四十五天
  • 原文地址:https://www.cnblogs.com/godcity/p/5566622.html
Copyright © 2011-2022 走看看