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

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…