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

Question

我正在使用 jQuery 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;
});

确保仅禁用内容图像(文本插图)，因为此解决方案可能会阻止您的设计图像加载。