Javascript 隐藏或删除html加载程序？

我们和同事讨论了这个话题。。。使用JavaScript在HTML中隐藏/显示或添加/删除GIF加载程序是否更好？我们得出的结论是：

隐藏/显示优点：

• 显示加载程序不需要使用JavaScript创建，因此速度应该更快；可忽略不计
• 更简单
• GIF图片随时可用

添加/删除优点：

• 删除加载程序（因此是DOM元素）应该会加快查询/处理DOM元素的速度
• 如果你的网站有很多加载器，下载速度可能会慢一些；可以使用HTML5应用程序缓存进行否定吗
• 延迟加载-只有在必要时才需要下载GIF图片

还有更多的优点/缺点吗？如何使用GIF加载程序？你推荐哪种方法？让我们假设两种情况： 页面上有多个加载程序。。。 a、 ）使用单个GIF图片

---

b、 ）根据我的经验，隐藏和显示是一种更好的方法，因为它不会弄乱DOM。这可能对性能没有任何好处，但如果您从DOM中删除它，然后稍后重新添加它，则可能会丢失JS事件绑定，除非使用jQuery的.on（）事件处理程序

---

我还要补充一点，虽然GIF是大多数浏览器长期支持的功能，但CSS动画可以创建更平滑的加载指示器，并具有更小的文件大小。

答案是，您的解决方案没有简单的答案。它是一个简单的web应用程序吗？它是一个需要附加动画gif才能加载的大型应用程序吗

如果您有更大的应用程序：

只需预加载动画gif（使用modenizr.js或css），然后您就可以简单地将其作为div的背景，您可以随时将其附加到任何内容，并优雅地将其删除。（速度极快，节省内存）。缺点是，如果你不是很有经验，你可能会忘记正确地删除它

在css中

加载{高度：100px；宽度：100px；背景图像：url（loader.gif）；背景位置：居中；}

这是您的“加载div”，css将背景图像加载到内存中

下一个

你有什么ajax div（假设它是内容）

---

$（“#content”）.append（我认为这段代码解决了这个问题：

 $(window).load(function() {
     $("#loader").remove(); //call the image with id like #loader
 });

.on
用于直接事件和委托事件。事件处理程序始终附加到调用
.on
的对象。如果附加了委托选择器，则如果缓存了与该选择器匹配的元素的冒泡事件，将调用回调。因此
.on
不会保护您不丢失event绑定，除非您将其附加到
文档中。
。好的-很高兴知道这一点。我已经有一段时间没有使用jQuery了，但我记得它解决了我在AJAX加载的元素上出现的悬停事件问题，这是我的基础。如果您建议使用
css
预加载
gif
，您可能应该演示如何操作。因为创建一个规则，如
。加载{background image:url（loading.gif）；}
将不会加载图像，除非在应用规则的站点上有一个元素。为什么这取决于应用程序的大小？如果在
$（“#content”）.append（”）之前的DOM中没有类为
加载
的元素；
被调用，则图像将在
$（“#content”）时加载。append（“”；
被调用，但不是在调用之前。存在
背景图像：url（loader.gif）；
不会自动加载图像，它只会在第一次应用规则时加载图像。@t.niese例如，我有一个web应用程序，其中有20/30个滑动视图，每个滑动视图都加载内容。a.我不希望有那么多静态div，b你必须严格遵守命名约定。但是如果有一个div通过各种方式加载内容只是显示和隐藏…。@t.niese是的，但是css加载它的速度比尝试动态加载图像的速度快得多…很可能更快（但我没有测试）。快得多，我想你没有注意到区别。但是单独使用css在DOM中没有相应的元素是不会加载图像的。因此没有预加载。这就是为什么你看到在没有使用精灵的情况下闪烁悬停（
a{background image:url（image.jpg）；}
，
a:hover{background image:url（image\u hover.jpg）}
）因为
image\u hover.jpg
将在鼠标结束时开始下载，因此图像不存在的时间很短。如果某项任务需要显示加载动画，则无需担心显示和隐藏或添加和删除dom元素所需的时间。我的建议始终是保持你的房间干净。