Maison > Article > interface Web > JQuery - onload, méthode prête expliquée en détail
JQuery - onload, méthode prête expliquée en détail
- 巴扎黑original
- 2017-06-25 10:29:451337parcourir
Il y a deux événements lorsque la page est chargée. L'un est prêt, ce qui indique que la structure du document a été chargée (à l'exclusion des fichiers multimédias non textuels tels que les images), et l'autre est onload, indiquant que tous les éléments de la page, y compris les images et autres fichiers, ont été chargés. (On peut dire : prêt est chargé avant le chargement !!!)
Un contrôle de style général, tel que le contrôle de la taille de l'image, est placé in onload Loading;
La méthode déclenchée par l'événement jS peut être chargée en ready;
De nombreuses personnes qui utilisent jQ commencent à écrire des scripts de cette façon :
-
Habituellement écrit
$(function(){ // do something }); -
En fait, c'est jq ready() Dans bref, cela équivaut à :
$(document).ready(function(){ //do something }) -
est également équivalent à ce qui suit : Méthode, les paramètres par défaut de jQuer sont : "document"; document).Ready() méthode VS OnLoad event VS $(window).load() méthode
$().ready(function(){ //do something })
JQueryGénéralement, la première chose à apprendre est de savoir quand démarrer un événement. Pendant longtemps, les événements déclenchés après le chargement de la page étaient chargés dans l'événement Onload de "Body" Pour l'événement Onload de Body et JQuery comparé au Ready. méthode, il y a de nombreux inconvénients :
pour l'événement Body.Onload , il ne sera déclenché qu'une fois que tout le contenu de la page aura été chargé. Je veux dire tout le contenu, y compris les images, le flash, etc. Si la page a beaucoup de contenu, l'utilisateur devra attendre longtemps.
Ça fait longtemps.
-
Et pour $(document .ready(), cette méthode ne sera déclenchée qu'après le chargement de tout le DOM de la page, ce qui accélérera sans doute grandement la page web
<.>
cb116c637d110a2bae602a260ab1cbec
36cc49f0c466276486e50c850b7e4956
在Onload事件中 只能这样加载，很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行
加载 多个函数的问题
代码和内容不分离
这个貌似不用说了，让人深恶痛绝-.-!!执行先后顺序不同
但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
<script type="text/javascript">
$(window).load(function() {
alert("hello");
});
$(window).load(function() {
alert("hello again");
});
</script>上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
当然不要忘了与之对应的Unload方法
<script type="text/javascript">
$(window).unload(function() {
alert("good bye");
});
</script>
上面代码会在页面关闭时引发.
在 所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
<body>
<script type="text/javascript">
(function() {
alert("hi");
})(jQuery)
</script>
</body>对， 就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
<body>
<p id="test">this is the content</p>
<script type="text/javascript">
alert($("#test").html());//I Can display the content
</script>
</body>
<body>
<script type="text/javascript">
alert($("#test").html());//I Can't display the content
</script>
<p id="test">this is the content</p>
</body>上面两段代码,
第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!