JQuery, load elements after page loaded

Question

I want to do something like this:

<img src="" class="after-all" data="/assets/huge-bg.png" /> <div class="after-all" data="/actions/div-content.html"></div>

And in JS

$("after-all").loadMissing();

I think the best way is build a plugin with recognize method:

if (img) $(this).attr('src', $(this).attr('data')); if (div) $(this).load($(this).attr('data'));

Is this possible ? What is the best way to do this ? How to do this ?

Images are loaded asynchronously anyway.

Pointy
– Pointy

2013-01-29 14:55:33 +00:00
Commented Jan 29, 2013 at 14:55 — Pointy
– Pointy, Commented Jan 29, 2013 at 14:55
You may be interested in the preloadjs library of createjs

War10ck
– War10ck

2013-01-29 14:58:16 +00:00
Commented Jan 29, 2013 at 14:58 — War10ck
– War10ck, Commented Jan 29, 2013 at 14:58

Frédéric Hamidi · Accepted Answer · 2013-01-29 14:57:03Z

You can use is():

$.fn.loadMissing = function() { return this.each(function() { var $this = $(this); if ($this.is("img")) { $this.attr("src", $this.attr("data")); } else if ($this.is("div")) { $this.load($this.attr("data")); } }); };

Note that you should use another attribute than data to store this information. An HTML5 data attribute like data-content might be a better solution.

Collectives™ on Stack Overflow

JQuery, load elements after page loaded

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related