/ / Unerwartetes Verhalten von Code im Fenster onload innerhalb des Dokuments bereit blockieren - Javascript, Jquery, HTML, Jquery-3

Unerwartetes Verhalten des Codes im Fenster onload innerhalb des dokumentbereiten Blocks - javascript, jquery, html, jquery-3

Mit JQuery <= 2.x funktionierte dieser Code und zeigte den Text in an div nachdem alles geladen war:

<!DOCTYPE html>
<html>
<head>
<title>JQuery 3 Window onload test</title>
</head>
<body>
<div id="my_div" style="visibility:hidden">Greetings!</div>
<script src="jquery.js"></script>
<script>
$(function () {
$(window).on("load", function () {
$("#my_div").css("visibility", "visible");
});
});
</script>
</body>
</html>

Mit der neuen JQuery 3.0.0 wird das div nicht angezeigt. Wenn ich jedoch die Onload-Bedingung des Fensters vollständig entferne, wie folgt:

$(function () {
$("#my_div").css("visibility", "visible");
});

... dann funktioniert es, oder wenn ich das Fenster beim Laden außerhalb des Dokuments verschiebe, ist es wie folgt:

$(function () {
// other things I need to do once the document is ready
});

$(window).on("load", function () {
$("#my_div").css("visibility", "visible");
});

... dann funktioniert es auch. Es gibt eine Dokumentation, die sich offenbar mit dem beschäftigt, was in meinem Beispiel passiert Hierauf der JQuery-Migrations- / Upgrade-Infoseite.

Klarstellung von JQuery-Gurus wäreIch schätze es, da ich jetzt viele Dateien überarbeiten muss, um diesem Verhalten Rechnung zu tragen, und es auf die richtige Weise tun möchte, wenn das erwartete Verhalten wie früher auftritt. Danke vielmals!

Antworten:

0 für die Antwort № 1

Versuchen Sie es mit:

$(document).ready(function(){
$("#my_div").css("visibility", "visible");
});

0 für die Antwort № 2

Sie können das DOM sicher im dokumentenbereiten Callback bearbeiten:

$(function() { // or $(document).ready(), they are equivalent
$("#my_div").css("visibility", "visible");
});

In diesem Beispiel sehe ich keine Notwendigkeit für das Fenster-Onload-Ereignis alles In dem Fenster, das geladen werden soll, können Sie den Ereignislistener an einer beliebigen Stelle im Dokument hinzufügen, ohne dass das Dokument bereit ist:

$(window).on("load", function() {
$("#my_div").css("visibility", "visible");
});

0 für die Antwort № 3

Das sieht für mich wie eine Rennsituation ausCode das Dokument bereit und die Fensterladefunktion würde gleichzeitig ausgelöst werden. Wenn Sie also einen Fensterlade-Listener anhängen, wäre dieses Ereignis vergangen. Warum funktioniert es in alten jQuery? Ich weiß es nicht und kümmert sich auch nicht wirklich darum, weil Sie, wie andere darauf hingewiesen haben, nicht so codieren würden.

Wenn Sie ein Bild in das Dokument einfügen, würden Sie das Laden verzögern und den Auslöser fangen.
https://jsfiddle.net/mowglisanu/13wfqdbL/

<img src="/images/http://placehold.it/300x300">