1

My question is how to trigger or call a function after an element has been loaded or element on the page and don't want to wait for the full page load.

Example Fiddle: http://jsfiddle.net/8bJUc/275/
Problem Fiddle: http://jsfiddle.net/8bJUc/274/

Call JS:

document.getElementsByClassName("owlCarousel").onLoad = function(){

// do stuff

$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});

};

HTML:

<span class='slide'>
<div id="owl-demo" class="owl-carousel">  <!-- If .owl-carousel has been loaded -->
  <div>
  <!-- Contents -->
 </div>
</div>
</span>

So i mean that if .slide has .owl-carousel class then call function will be work.
Expecting suggestions?

Aariba
  • 1,174
  • 5
  • 20
  • 52
  • Do you mean when the div is loaded or when all the images within the div have been loaded? A div doesn't have an onload event as it's not an external resource and is loaded as part of the body. – acontell May 02 '15 at 15:45
  • Yes i mean when the div is loaded or when all the images within the div have been loaded, any suggestion? – Aariba May 02 '15 at 16:06
  • Plugin should work when .owl-carousel class on the page. – Aariba May 02 '15 at 16:14

3 Answers3

1

The div is loaded almost inmediately when the body loads. It has no onload event and the only way to execute a script just after it finished loading is appending the script just after it in the DOM (as some other answers suggested).

Fiddle with this option implemented.

Note that you need to wrap the script in the header of your page in order to make things work (look at the jsfiddle options I set)

In your HTML it'd look like

<head>
    ... rest of your stuff ...
    function launchScript() {
        // do stuff
        $("#owl-demo").owlCarousel({
            navigation: true,
            pagination: true,
            lazyLoad: true
        });    
    }
</head>

And then:

<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has loaded-->
...
</div>
<script>
    launchScript();
</script>
acontell
  • 6,792
  • 1
  • 19
  • 32
  • It's not working on my Website,I have placed JS as you said, Note: On my site – Aariba May 02 '15 at 17:20
0

How about this:

 $(function(){
     if ($('.slide .owl-carousel').length){ 
         //call function 
     }
 });
renakre
  • 8,001
  • 5
  • 46
  • 99
0

If it needs to be done as soon as possible, you could manually invoke it immediately after the element it relies on is defined.

function asap() {
    // ...
}

<div id="owl-demo" class="owl-carousel">
    <!-- ... -->
</div>
<script>
asap();
</script>

Example fiddle (open your console)

Paul S.
  • 64,864
  • 9
  • 122
  • 138
  • Example Fiddle please :) – Aariba May 02 '15 at 15:36
  • my question was for CLASS not for ID, for some reason i need Class, so any suggestions for class? – Aariba May 02 '15 at 16:00
  • @Aabira it makes no difference, just access by class instead. The point is that the node exists – Paul S. May 02 '15 at 16:04
  • Hi dear it's not working, Plugin should work when .owl-carousel class on the page, but it run without .owl-carousel class, see here: http://jsfiddle.net/8bJUc/276/ – Aariba May 02 '15 at 16:14
  • i means, i have removed `.owl-carousel` class from here `
    ` my question is call only when `.owl-carousel` class on the page.
     – Aariba May 03 '15 at 03:11