preventing a DOM object from loading

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>

Do you mean for embedded/linked media? Such as YouTube videos/images and such? — David Thomas
– David Thomas, Commented Feb 13, 2012 at 20:45

nodrog · Accepted Answer · 2012-02-13 20:44:22Z

4

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.

answered Feb 13, 2012 at 20:44

nodrog

3,5322 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Samuel Over a year ago

Not putting an <img> element on the page doesn't prevent it from loading. stackoverflow.com/a/9267835/20394

nodrog Over a year ago

sorry mike note sure what you mean, is that a double negative?

Mike Samuel Over a year ago

if you create an <img> element and assign its src it will load regardless of what you do. You can put it on the page, leave it off the page, whatever, the browser will still request src.

Mike Samuel Over a year ago

Also, I don't buy into the idea that double negatives are bad English. If you can't deal with contrapositives you shouldn't be writing code :)

nodrog Over a year ago

if anyone has this issue you could look at using a jquery plugin like appelsiini.net/projects/lazyload

czerasz · Accepted Answer · 2012-02-13 20:51:35Z

3

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.

answered Feb 13, 2012 at 20:51

czerasz

14.4k10 gold badges56 silver badges63 bronze badges

Comments

gdoron · Accepted Answer · 2012-02-13 20:51:45Z

2

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

edited Feb 13, 2012 at 20:51

answered Feb 13, 2012 at 20:45

gdoron

151k59 gold badges302 silver badges376 bronze badges

1 Comment

Blainer Over a year ago

The reason I am doing this is because loading alot of flash elemtns on a page is hard on a tablet. For the tablets I just will direct link to the .mp3 file instead of having a flash player.

Yazan Malkawi · Accepted Answer · 2012-02-13 20:58:47Z

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?

Mike Samuel · Accepted Answer · 2012-02-13 20:52:39Z

0

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.

answered Feb 13, 2012 at 20:52

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

Jeffrey Sweeney · Accepted Answer · 2012-02-13 20:55:58Z

0

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.

answered Feb 13, 2012 at 20:55

Jeffrey Sweeney

6,1545 gold badges27 silver badges32 bronze badges

Comments

mmg666 · Accepted Answer · 2012-02-13 20:58:25Z

0

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.

answered Feb 13, 2012 at 20:58

mmg666

3531 silver badge12 bronze badges

Comments

AGrush · Accepted Answer · 2019-09-11 12:28:33Z

0

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

answered Sep 11, 2019 at 12:28

AGrush

1,16716 silver badges34 bronze badges

Collectives™ on Stack Overflow

preventing a DOM object from loading

8 Answers 8

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related