Question

我使用jQuery scrollTo（）在我的网站上平滑滚动。除了在初始装载期间，工作正常。当页面上的图像被加载时，它使得平滑滚动不那么平滑并且它非常滞后。更糟糕的是，我还预先加载了网站其他部分的所有其他图片，因此加载所有内容的时间更长（尽管隐藏）。

所以问题是你可以在scrollTo（）期间停止所有处理，暂停所有加载，平滑滚动页面，然后返回加载？

我用于scrollTo的jQuery：

$('.smooth-scroll').click(function(e){
            var dest = $(this).attr("href");
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $(dest).offset().top -60
            }, 1000);
        });

对于图像预加载：

image1 = new Image()
image1.src = "images/image.jpg"

如果可以暂停所有这些，我需要在这里添加什么？

Answer 1

您可以像这样阻止图像加载：

var unloaded = [];
$('img.noload').each(function (image) {
    unloaded.push(image);
    image._src = image.src;
    image.src = 'loader.gif'; // Use an loading image to prevent "ALT" attribute effect
});

完成滚动（回调功能）后，调用并将真实SRC应用于您的不同图像：

unloaded.each(function (image) {
    image.src = image._src;
});

确保仅禁用内容图片（文字插图），因为此解决方案可能会阻止您的设计图片加载。

Answer 2

您可以将所有jquery代码包装到$（window）.load绑定中，这将在加载所有内容后设置处理程序：

$(window).load(function(){
  $('.smooth-scroll').click(function(e){
            var dest = $(this).attr("href");
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $(dest).offset().top -60
            }, 1000);
        });

});

或在 Thibault Bach 的答案中编写代码。

Answer 3

使用CSS或HTML <img src="img.jpg" height="200" width="100" />

设置宽度和高度

如何在函数期间暂停所有jQuery函数和DOM加载？

3 个答案: