onLoad funktioniert nicht für Elemente

Ich versuche eine Aktion auszulösen, sobald ein Element auf der Seite geladen wird. Ich verwende Jquery on('load') Funktionalität, um dies zu tun.onLoad funktioniert nicht für Elemente

Allerdings funktioniert es nicht. Hier ist der Code und JSFiddle

console.log("Hi"); 
$('#complexDiv').on('load', function(){ 
    console.log('Header loaded'); 
});

HTML

</header> 
<body> 
    <h1>Hello!</h1> 
    <div id="complexDiv"> 
    <h2>Some text</h2> 
    <p>A paragraph</p> 
    <img src="" alt=""> 
    </div> 
</body>

Quelle

2016-07-17 CodyBugstein

I load-Ereignis glauben nur auf Elemente genannt, die externe Ressourcen erfordern.

Von jQuery:

Das Load-Ereignis wird ein Element gesendet, wenn es und alle Unterelemente haben vollständig geladen wird. Dieses Ereignis kann an ein beliebiges Element gesendet werden, das mit einer URL verknüpft ist: images, scripts, frames, iframes und das Fensterobjekt.

Fall für .ready():

Während JavaScript, um das Ladeereignis bietet Code zur Ausführung, wenn eine Seite gerendert wird, wird dieses Ereignis nicht, bis alle Vermögenswerte wie Bilder ausgelöst werden wurden vollständig erhalten. In den meisten Fällen kann das Skript ausgeführt werden, sobald die DOM-Hierarchie vollständig erstellt wurde und Sie .ready() dafür verwenden können.

Für Ihre Situation können Sie Fensterlast hören oder besser noch verwenden, da die Last veraltet ist.

$(window).on('load', function(){ 
    console.log('Header loaded'); 
    });

Quelle

2016-07-17 20:20:54

Sie können mit animation-duration Set 0s, verwenden Sie eine animation Eigenschaft bei css für #complexDiv Element definieren animationstart Ereignis an $(window), .one().

Hinweis, onanimationstart Ereignisattribut kann bei Chrom verwendet werden, Chrom ohne jQuery .one(); firefox 47 nicht erkannt onanimationstart event attirbute. Außerdem sollte @keyframes für animation-name bei css festgelegt werden, obwohl nicht Eigenschaften festgelegt werden müssen.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"> 
 
    </script> 
 
    <style> 
 
    #complexDiv { 
 
     animation: e 0s; 
 
     -moz-animation: e 0s; 
 
     -webkit-animation: e 0s; 
 
    }   
 
    @keyframes e {}  
 
    @-moz-keyframes e {}   
 
    @-webkit-keyframes e {} 
 
    </style> 
 
    <script> 
 
    $(window).one("animationstart", function(e) { 
 
     alert(e.target.id + " " + e.type) 
 
     console.log(e.target, e.type); 
 
    }) 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello!</h1> 
 
    <div id="complexDiv"> 
 
    <h2>Some text</h2> 
 
    <p>A paragraph</p> 
 
    <img alt="" src="" /> 
 
    </div> 
 
</body> 
 

 
</html>

plnkr http://plnkr.co/edit/70FF4AyY9URLnwgIZl68?p=preview

Quelle

2016-07-17 21:08:40 guest271314

Nizza Trick, fantastisch –

onLoad funktioniert nicht für Elemente

Antwort

Verwandte Themen