Javascript 阻止加载DOM对象

我知道可以将display属性设置为“none”并使用jquery进行切换，但最终该对象仍然被加载，只是没有显示。是否有一种方法可以防止加载元素以节省加载时间？我使用下面的代码切换css属性，但我希望它根本不加载元素

js

我的元素

<div class="startb"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></a></div>

<div class="flashObj"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="20">
            <param name="movie" value="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90" />
            <param name="wmode" value="transparent" />
            <embed wmode="transparent" width="200" height="20" src="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90"
            type="application/x-shockwave-flash" />
            </object></div>

---

不要将元素放在页面上，并在需要时创建它

---

如果html中有一个html元素，那么它已经存在了。除非您有多个版本的元素，否则这不会造成太大的开销。

您可以从页面中删除它：

$(".startb").remove();

但它仍将被加载，然后被删除。

---

因此，不要在不需要时删除它，而是在需要时创建它…

将此内容放在html文件的末尾：

<script type="text/template" id="myContent">
    <div>content</div>
</script>

这样可以节省渲染元素的时间。但是你仍然需要下载html。 另一种方法是通过AJAX下载内容。

否

不管您做什么，某些类型的元素都会加载

var img = document.createElement('img');
img.onerror = function () { alert("The browser tried to load me and failed"); };
img.src = 'bogus';
// img hasn't even been added to the DOM.

---

您可以使用服务器端语言（如PHP）来加载DOM的各个部分。虽然它并不总是一个选项，但它比客户端脚本可靠得多。缺点是调试可能更困难。

让我们假设页面中有这样一个div元素

<div id="containerDiv">
</div>

---

您可以使用

$（“#containerDiv”）.append（）

方法在页面加载中添加元素。但是，我不明白为什么不在服务器端执行此操作。

您可以按如下方式使用AJAX加载，但必须将其拆分为三个不同的HTML文件和一个JS文件

JS

startb.html

<div class="startb"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></a></div>

flashObj.html

<div class="flashObj"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="20">
            <param name="movie" value="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90" />
            <param name="wmode" value="transparent" />
            <embed wmode="transparent" width="200" height="20" src="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90"
            type="application/x-shockwave-flash" />
            </object></div>

以及你的网页：

<div id="container"></div>

---

请告诉我您是否需要任何进一步的帮助？

您可以使用延迟加载：例如，您将html。。在javascript中有一个条件，当宽度变化低于768px时，用src替换数据src。

---

您是指嵌入式/链接媒体吗？比如YouTube视频/图像等等？我之所以这么做是因为在平板电脑上很难在页面上加载大量flash元素。对于平板电脑，我将直接链接到.mp3文件，而不是使用flash播放器。不在页面上添加

元素不会阻止加载。抱歉，迈克，请注意，你确定你的意思是，这是双重否定吗？如果你创建一个

，无论你做什么，它都会加载。你可以把它放在页面上，不放在页面上，不管怎样，浏览器仍然会请求
src
。而且，我不相信双重否定是糟糕的英语。如果你不能处理反作用，你就不应该写代码：）如果有人有这个问题，你可以使用jquery插件，比如
<div class="startb"><a href="Audio/004_IAM_God_is_Love.mp3"><img src="dbs/images/start.png" width="40" height="40" /></a></div>

<div class="flashObj"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="20">
            <param name="movie" value="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90" />
            <param name="wmode" value="transparent" />
            <embed wmode="transparent" width="200" height="20" src="dbs/js/singlemp3player.swf?file=Audio/004_IAM_God_is_Love.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90"
            type="application/x-shockwave-flash" />
            </object></div>

<div id="container"></div>