0

我的下一个问题。我做了一个小地图，显示了一些点。我认为将地图拆分为 200x200 像素的图块以便于加载是个好主意。

但是随着每个缩放级别，地图拖动变得更慢。我想我在算法中犯了一个逻辑错误。

算法是：

    function LazyLoad(img) {

    //Viewport data
    var top =   m.viewingBox.offset().top;
    var left =  m.viewingBox.offset().left;
    var right = m.viewingBox.offset().left + m.viewingBox.width();
    var bot =   m.viewingBox.offset().top + m.viewingBox.height();

    //Image data
    var imgT = img.offset().top;
    var imgL = img.offset().left;
    var imgR = img.offset().left + img.width();
    var imgB = img.offset().top + img.height();             

    //check if image is in viewport
    return (imgB > top && imgR > left && imgL < right && imgT < bot)    
}

function LoadImage() {  
    //Check every tile
    $(".emptyTile").each(function() {
        //if TRUE, load image           
        if(LazyLoad($(this))) {

            $(this).attr("src", $(this).attr("data-src"));

            $(this).attr("class", "fullTile");                  
        }
    });
}

任何人都知道我的错误在哪里，或者坏人在哪一点，放慢了一切？

谢谢阅读。如果有任何不清楚的地方，请询问。

编辑：此函数调用 LoadImage。所以每次用户拖动地图时，都会调用LoadImage。

    function MoveMap(x, y) {

    var newX = x;
    var newY = y;

    if(m.locked) {  
        var rightEdge = -m.map.width() + m.viewingBox.width();
        var topEdge = -m.map.height() + m.viewingBox.height();

        newX = newX < rightEdge? rightEdge : newX;
        newY = newY < topEdge ? topEdge : newY;
        newX = newX > 0 ? 0 : newX;
        newY = newY > 0 ? 0 : newY;
    }

    // holding the zoom point
    var testx = m.zoom.x + newX;
    var testy = m.zoom.y + newY;

    m.zoom.x= m.zoom.x - testx;
    m.zoom.y= m.zoom.y - testy; 
    m.map.css({"left" : newX, "top" : newY});
    LoadImage();
};

用另一个“解决方案”再次尝试，但问题仍然存在。我添加了代码，也许有些人（希望永远不会死）对这样的应用程序有经验并且知道瓶颈。这个数字是不是太高了？缩放级别 2 大约有 7xx 图像，级别 3 有 13xx 图像。

    function LoadImage() {

    var images = $(".emptyTile");
    //console.log(images);

    //Viewport data
    var inview = images.filter(function() {   
        var top =       m.viewingBox.offset().top -200;
        var left =      m.viewingBox.offset().left -200;
        var right =     m.viewingBox.offset().left + m.viewingBox.width() +200;
        var bot =       m.viewingBox.offset().top + m.viewingBox.height() +200;

        //Image data
        var imgT = $(this).offset().top;
        var imgL = $(this).offset().left;
        var imgR = $(this).offset().left + $(this).width();
        var imgB = $(this).offset().top + $(this).height();             

        //check borders of viewport
        return (imgB > top && imgR > left && imgL < right && imgT < bot)
    });

    images.one("loadIt", function() {
        source = $(this).attr("data-src");

        if (source) {
            $(this).attr("src", source);
            $(this).attr("class", "fullTile");
        }
    });

    loaded = inview.trigger("loadIt");
    images = images.not(loaded);
}
4

1 回答 1

0

解决了这个问题。这只是我糟糕的代码。

我将大量的 offset()、width() 和 height() 函数分开，让它更薄一些，现在效果更好。

感谢阅读，永远不要忘记，不要在循环中添加太多功能；）

于 2013-06-06T17:30:06.000 回答