Jquery - MapTiles loading very slow with lazy load

问题

And my next problem. I made a little Map, showing some points. I thought it is a good idea to split the map into 200x200px tiles for easy loading.

But with every zoom level the map dragging becomes slower. I guess I made a logical mistake in my algorithm.

The algorithms are:

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

Anyone an idea where is my mistake or which point is the bad guy, slowing everything out?

Thanks for reading. If anything is unclear, just ask.

Edit: This function calls LoadImage. So every time the user drags the map, LoadImage is called.

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

Tried it again with another "solution" but the problem remains the same. I add the code, maybe some (hope never dies) has experience with such a app and knows the bottle neck. Is the number just too high? Zoom level 2 has about 7xx images, level three 13xx images.

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

回答1:

Solved the problem. It was just my awful code.

I separated the huge amount of offset(), width() ad height() functions, made it little bit thinner and it works way better now.

Thanks for reading and never forget, don't put to much functions into your loop ;)

来源：https://stackoverflow.com/questions/16873248/jquery-maptiles-loading-very-slow-with-lazy-load

标签

jquery

map

lazy-loading