Question

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

JS

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
    $(".startb").css({"display":"inline-block"});
    $(".flashObj").css({"display":"none"});
}
else {
    $(".startb").css({"display":"none"});
    $(".flashObj").css({"display":"inline-block"});
}

我的元素

<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>

Answer 1

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

如果你在html中有一个html元素，那么它已经存在了。这不应该是一个很大的开销，除非你有很多版本的元素。

Answer 2

将它放在你的html文件的末尾：

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

然后追加这样的元素：

$('#myContent').appendTo('body');

通过此，您将节省元素渲染的时间。但是你还是要下载html。另一种方法是通过AJAX下载内容。

Answer 3

您可以从页面中删除它：

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

但它仍会被加载然后删除所以不要在不需要时删除它，而是在需要时创建它......

Answer 4

没有

无论你做什么，某些元素都会加载。

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.

Answer 5

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

Answer 6

我们假设你的页面中有一个这样的div元素。

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

您可以使用$("#containerDiv").append()方法在页面加载时添加元素。但是，我没有看到你不在服务器端这样做的原因。

Answer 7

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

JS

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
if(isAndroid) {
$("#container").empty();
$("#container").load( "startb.html");

}
else {
$("#container").empty();
$("#container").load( "flashObj.html");
}

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>

如果您需要任何进一步的帮助，请告诉我？

Answer 8

您可以使用延迟加载：例如，您放入html ..并且当宽度更改为768px以下时，您的javascript中就有条件用src替换data-src。 some libraries for lazy loading

阻止加载DOM对象

8 个答案: