Question

我的下一个问题。我做了一个小地图，显示了一些观点。我认为将地图分割成200x200px的瓷砖以便于加载是个好主意。

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

算法是：

    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);
}

Answer 1

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

我将大量的offset（），width（）ad height（）函数分开，使它稍微变薄，现在效果更好。

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

Jquery - 使用延迟加载加载非常慢的MapTiles

1 个答案: