阻止加载DOM对象

Question

I know it is possible to set a display property to "none" and toggle it with jquery, but ultimately the object is still loaded, just not displayed. Is there a way to prevent a element from being loaded at all to save loading times? I am using the below code to toggle css properties but I want it to not load the element at all.

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"});
}

my elements

<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

Dont put the element on the page and create it when you need it.

If you have a html element in the html then its already there. This should not be much of an overhead, unless you have numerous versions of the element.

Answer 2

Put this at the end of Your html file:

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

Then append the element like this:

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

By this You will save time the element is rendered. But still You have to download the html. Another way to do this would be downloading the content by AJAX.

Answer 3

You can delete it from the page:

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

But it will still be loaded and then deleted.
So instead of delete it when not needed, create it when needed...

Answer 4

You can use AJAX loading as follows, but you have to split then into three different HTML files and one JS file

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>

And your homepage:

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

Please tell me if you need any further help?

Answer 5

You can use lazy loading: so for example you put in the html.. and you have a condition in your javascript to replace the data-src with src when the width changes below 768px. some libraries for lazy loading

Answer 6

No.

Some kinds of elements load regardless of what you do.

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 7

You could use a server-sided language, such as PHP, to load the parts of the DOM. While it isn't always an option, it is far more reliable than a client-side script. The downside is that it may be more difficult to debug.

Answer 8

Let's assume there is a div element like this in your page.

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

You can add your elements on page load by using the $("#containerDiv").append() method. However, I don't see the reason why you wouldn't do it on the server side.