Question

所以我有了这个页面，点击一个按钮，在对其元数据执行各种计算后添加了一个图像，该元数据存储为数据属性。

由于计算可能需要几秒钟，我想在图像上显示叠加层。所以我这样做：

$(selectedImageId).addClass('loading');
//perform series of calculations here...
$(selectedImageId).removeClass('loading').addClass('calculated-embellishments');

我会想象脚本首先在图像上显示加载叠加，然后执行冗长的计算，然后用选定的装饰类替换叠加层。然而，似乎DOM只在最后更新，以至于我从未看到加载类，它只是在几秒钟之后直接从普通图像跳转到点缀类。

如果我在添加点缀的最后一行之前添加alert('test')，那么我可以看到图像上的加载叠加，但不是。

如上所述，我怎样才能按照我想要的方式完成这项工作？任何指针都非常受欢迎！

Answer 1

您可能希望使用setTimeout执行计算。

var WAIT = 10; // experiment with small values here

$(selectedImageId).addClass('loading');

setTimeout(function () {
  //perform series of calculations here...
  $(selectedImageId).removeClass('loading').addClass('calculated-embellishments');
}, WAIT);

如果你想玩超时长度，这里有一个带有类似情况的演示的jsfiddle：https://jsfiddle.net/v2n19w4d/1/我发现接近零的超时长度不起作用。

这实际上是在进行计算时阻止DOM更新之前更新的问题。例如，请参阅jQuery append in loop - DOM does not update until the end。

Answer 2

可能发生的是你的＆＃34; 冗长的计算＆＃34;使浏览器＆＃34;挂起＆＃34;处理时，没有机会重新绘制图像以反映新添加的loading类。

然后，一旦完成计算，您的最后一条指令将loading类替换为calculated-embellishments类，现在浏览器有时间重新绘制。但是loading类已经消失了。

至少有3种解决方法让浏览器在计算繁忙之前实际显示您的loading课程：

使用@csum提出的setTimeout，这是在重新绘制之前浏览器需要多长时间才能显示loading类的图像。因此需要测试＆＃34;不同的超时值，但仍然没有任何保证，因为结果将取决于每个客户端当前的性能（CPU，内存，当前CPU负载！）。
在覆盖的"load"事件的回调中开始计算（如果是图像）。但我不确定"load"事件是否保证图像（叠加）被绘制（显示在屏幕上）。
在开始计算之前，使用2个嵌套requestAnimationFrame确保至少发生了1次重新绘制。

jQuery同时更新DOM元素和计算

2 个答案: