Question

我已经问过a similar question，但没人能帮忙。

我想先用理论问题来尝试：

我在可移动div和视口中有大约7xx - 15xx HTML元素（比方说1000px + 500px）。

我可以在此视口中使用这些元素拖动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);

}

在触发开关之前，这是空文件：

<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">

Answer 1

JQuery处理它是否太过分了？

不完全。当你看到滞后时，你更有可能遇到浏览器本身的限制而不是jQuery。

在您的情况下，代码中的低效率很可能是根本原因，尽管如果没有看到您的实际代码，我们任何人都无法真正帮助您。

我和其他人一样，在没有滞后的情况下研究了更大的元素集。

JQuery - 循环700和更多元素

1 个答案: