-4

我已经问过一个类似的问题，但没有人能够提供帮助。

我现在想先用一个理论问题来试试：

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

我可以在这个视口中拖动带有这些元素的 div，当一个元素进入视口时，它会加载一个图像。

因此，每次拖动时，jQuery 都必须检查元素是否在视口中。

我遇到的问题是这真的很滞后（Chrome除外），我不知道为什么。使用 300 个元素，一切正常。

jQuery 处理的太多了吗？

函数加载图像（）{

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

1 回答 1

0

JQuery 处理的太多了吗？

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

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

和其他人一样，我一直在研究比没有滞后的更大的元素集。

于 2013-06-06T10:02:18.253 回答