我正在使用 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"
如果可以暂停这一切,我需要在此处添加什么?
最佳答案
您可以像这样阻止图像加载:
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;
});
确保仅禁用内容图像(文本插图),因为此解决方案可能会阻止您的设计图像加载。
关于javascript - 如何在函数执行期间暂停所有 jQuery 函数和 DOM 加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31579190/