ホームページ  >  記事  >  ウェブフロントエンド  >  jsとjqueryで画像の自動読み込みを実装する方法(コード添付)

jsとjqueryで画像の自動読み込みを実装する方法(コード添付)

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-14 13:59:351666ブラウズ

今回は、jsとjqueryで画像の自動読み込みを実装する方法(コード付き)を紹介します。 jsとjqueryで画像の自動読み込みを実装するための注意事項は何ですか?実際のケースを見てみましょう。 。 1.

JavaScript自動読み込み

①テキスト内で onload を使用する: 次のように、ページ内のすべてのコンテンツ (画像を含む) が読み込まれた後に onload を実行します:

<body onload="alert(1)"></body>          <!-- 当有一个onload -->
<body onload="alert(2);alert(3);alert(4)"></body> <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->
②スクリプト内で window.onload を使用する: 次のように、ページ内のすべてのコンテンツ (画像を含む) が読み込まれた後に window.onload を実行します。 2. jQueryの自動読み込み

①ページ内のDOM構造(画像を除く)を読み込んで実行する場合(DOM要素に紐づくものが読み込まれていない可能性があります)、以下の3通りの書き方があります:

window.onload = function(){...}; //正确写法,这是匿名函数
//------------↓多个window.onload的错误写法-------------
window.onload = function(){alert("text1");}; //不执行
window.onload = function(){alert("text2");}; //执行
//------------↑---------------------------------------
//------------↓多个window.onload的正确写法---------------------------
window.attachEvent("onload",function(){alert('a')});
window.attachEvent("onload",function(){alert('b')});
window.attachEvent("onload",function(){alert('c')});
//重点提示:在IE浏览器下用 (window.attachEvent),会弹出 c b a 
//重点提示:其他浏览器下用 (window.addEventListener),会弹出 a b c
//------------↑-----------------------------------------------------
② 以下のように、ページ内のすべての要素(画像を含む)が読み込まれた後にのみ実行します。

りー

③匿名関数をすぐに実行します。 無名関数を括弧で囲み、その後に括弧を続けると、その無名関数をすぐに実行できます。次の 2 つの方法があります。

$(document).ready(function(){...});//写法1,全称 
$(function(){...});        //写法2,简写 
jQuery(function($){...});     //写法3,简写
この記事の事例を読んで、方法をマスターしたと思います。 . php 中国語ウェブサイトの他の関連記事にも注目してください。

推奨読書:


以上がjsとjqueryで画像の自動読み込みを実装する方法(コード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。