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

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

于 2013-06-06T17:30:06.000 に答える