Javascript 当用户单击链接到下一页的项目时，如何灰显并在网页中显示加载？

我创建了一个包含许多页面的php html网站，在这些页面中有、、、和其他html元素，但并非所有这些元素都链接到其他页面，这意味着它们在当前页面中执行任务，但其他元素链接到其他页面，当用户单击链接到其他页面的这些元素（、、…）时，我如何设置，在进入下一页之前，页面将显示为灰色，并显示loading.gif。 我看到这个代码了

---

但是在这个jQuery代码中，我们需要设置$（“#按钮”）；对于这些元素一个接一个，我认为这不是一个好的工作，好主意是什么，它适用于整个页面

一个快速解决方案是将同一类应用于所有需要以这种方式操作的按钮：

<button class="externalLink">Button 1</button>
<button class="externalLink">Button 2</button>
<button class="externalLink">Button 3</button>
<button class="externalLink">Button 4</button>
<button class="externalLink">Button 5</button>

---

这将对该类的所有按钮应用相同的行为

亲爱的Cirou非常感谢您的回答，但我有许多包含许多元素的页面，我不可能在数千个元素中添加“class=”externalLink“，是否有更好的方法可以在整个网页上实现，当用户点击任何链接到其他页面的元素时，灰显功能被加载？当你说：“任何链接到其他页面的元素”时，你能说得更清楚些吗？你说的是什么类型的html元素？还有其他类似的元素不需要这样做。。。或者有时候

$('.externalLink').click(pop);