如果元素已加载，则调用函数

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/

示例小提琴:http://jsfiddle.net/8bJUc/275/问题小提琴: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?

所以我的意思是,如果.slide有.owl-carousel类,那么调用函数将起作用。期待建议?

3 个解决方案

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

当身体加载时,div几乎立即加载。它没有onload事件,并且在完成加载后执行脚本的唯一方法是将脚本添加到DOM之后(正如其他一些建议所示)。

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)

请注意,您需要将脚本包装在页面的标题中以使工作正常(请查看我设置的jsfiddle选项)

In your HTML it'd look like

在你的HTML中它看起来像

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

#2

How about this:

这个怎么样:

 $(function(){
     if ($('.slide .owl-carousel').length){ 
         //call function 
     }
 });

#3

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)

小提示(打开你的控制台)

#1