jquery - JQuery - 700 以上の要素をループする

Question

私はすでに同様の質問をしましたが、誰も助けることができませんでした。

最初に理論的な質問で試してみたいと思います：

移動可能な div とビューポート (1000px + 500px としましょう) に約 7xx - 15xx の HTML 要素があります。

このビューポート内でこれらの要素を含む div をドラッグできます。要素がビューポートに入ると、画像が読み込まれます。

そのため、ドラッグするたびに、jQuery は要素がビューポートにあるかどうかを確認する必要があります。

私が直面している問題は、これが本当に遅い (Chrome を除く) ことであり、その理由はわかりません。300 個の要素を使用すると、すべて正常に動作します。

jQuery で処理するには多すぎますか?

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

}

これは、スイッチをトリガーする前の emptyFile です。

<img class="emptyTile" data-src="images/map3/map673.png" src="images/loading.gif">

以降：

<img class="emptyTile" data-src="images/map3/map673.png" src="images/map3/map673.png">