предотвращение загрузки объекта DOM

Question

Я знаю, что можно установить для свойства отображения значение "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

Вы можете использовать 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 5

Давайте предположим, что на вашей странице есть такой элемент div.

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

Вы можете добавить свои элементы при загрузке страницы, используя метод $("#containerDiv").append(). Однако я не вижу причины, по которой вы бы этого не делали на стороне сервера.

Answer 6

Вы можете использовать серверный язык, такой как PHP, для загрузки частей DOM. Хотя это не всегда вариант, он гораздо надежнее, чем сценарий на стороне клиента. Недостатком является то, что отладка может быть более сложной.

Answer 7

Нет.

Некоторые виды элементов загружаются независимо от того, что вы делаете.

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.