Dom は、画像をロードして実行できるようにするスクリプトコードをロードします

ホームページ

ウェブフロントエンド

jsチュートリアル

Dom は、画像をロードして実行できるようにするスクリプトコードをロードします_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:04 PM

dom 負荷

ここで、この問題を解決する方法を検討してみましょう。解決策は、DOM がロードされた後にプログラムを実行することです。

まずは二人を紹介します。 1 人は jquery の作者である John Resig、2 人は JavaScript の世界的マスターであるディーンエドワーズです。 (この 2 人の天才を皆さんも覚えておいてください!)

jquery には、特に DOM の読み込みを解決する関数 $(document).ready() (略称は $(fn)) があり、非常に使いやすいです。「Pro JavaScript Techniques」では、John Resig が DOM ロードを処理するためのメソッドを紹介しています。その原理は、document&& document.getElementsByTagName &&document.getElementById&& document.body を使用して Dom ツリーがロードされているかどうかを判断することです。コードは次のとおりです:

コードをコピーしますコードは次のとおりです:

function domReady( f ) { 
// DOM がロードされている場合は、関数をすぐに実行します 
if ( domReady.done ) return f() 
// を追加した場合a function 
if ( domReady.timer ) { 
// 実行する関数のリストに追加します 
domReady.ready.push( f ); else { 
//ページをロードします。イベントのバインドを完了します。
// 最初に完了しないようにするには、addEvent (以下にリストします) を使用します。
addEvent( window, “load”, isDOMReady ); // 関数を初期化します。 Array of 
domReady.ready = [ f ]; 
// Dom が利用可能かどうかをすぐに確認できます 
domReady.timer = setInterval( isDOMReady, 13 ); 
} 
// Dom が動作可能かどうかを確認します 
 function isDOMReady() { 
// Dom が動作可能であることが確認された場合は無視します 
if ( domReady.done ) return false; 
// 複数の関数と要素が利用可能かどうかを確認します
if (document && document.getElementsByTagName && document.getElementById && document.body) { 
// 利用可能な場合は、チェックを停止します
clearInterval( domReady.timer); 
domReady .timer = null; 
 // すべての待機中の関数を実行します 
for ( var i = 0; i 
domReady.ready.length) [i](); 
// ここで記録が完了しました 
domReady.ready = null; 
} 
} 
// ディーン・エドワーズ著2005 addEvent/removeEvent、
// Tino Zijdel 主催
// http://dean.edwards.name/weblog/2005/10/add-event/ 
//利点は 1.すべてのブラウザで動作します。
///2.this は現在の要素を指します。
//3. デフォルトの動作を防ぎ、イベントのバブリングを防ぐ関数です。バブリング段階でのみ機能します
function addEvent(element, type, handler) { 
 // 各イベント ハンドラーに一意の ID を割り当てます 
 if (!handler.$$guid) handler.$$guid = addEvent.guid ; 
 // 要素のイベント タイプのハッシュ テーブルを作成します 
 if (!element.events) element.events = {} 
 // それぞれのイベント ハンドラーのハッシュ テーブルを作成します要素/イベントのペア 
 var handlers = element.events[type]; 
 if (!handlers) { 
 handlers = element.events[type] = {}; // 既存のイベントを格納します。ハンドラー (存在する場合) 
 If (Element ["on" Type]) {
 Handler [0] = Element ["On" Type] 
} 
} 
 // everr をハッシュ テーブルに保存します。 
 handlers[handler.$$guid] = handler; 
 // すべての処理を実行するグ​​ローバル イベント ハンドラーを割り当てます。 
 element["on" type] = handleEvent; 🎜>}; 
/ / 一意の ID を作成するために使用されるカウンター 
addEvent.guid = 1; 
function RemoveEvent(element, type, handler) { 
 // ハッシュからイベント ハンドラーを削除table 
 if (element. events && element.events[type]) { 
 element.events[type][handler.$$guid] を削除します。; 
function handleEvent(event) { 
 var returnValue = true; 
 // イベント オブジェクトを取得します（IE はグローバル イベント オブジェクトを使用します） 
 event = event || fixEvent(window.event); 
 // イベント ハンドラーのハッシュ テーブルへの参照を取得します 
 var handlers = this.events[event.type]; 
 // 各イベント ハンドラを実行 
 for (var i in handlers) { 
 this.$$handleEvent = handlers[i]; 
 if (this.$$handleEvent(event) === false) { 
 returnValue = false; 
 } 
 } 
 return returnValue; 
}; 
function fixEvent(event) { 
 // W3C 標準 イベント メソッドを追加 
 event.preventDefault = fixEvent.preventDefault; 
 event.stopPropagation = fixEvent.stopPropagation; 
 リターン イベント; 
}; 
fixEvent.preventDefault = function() { 
 this.returnValue = false; 
}; 
fixEvent.stopPropagation = function() { 
 this.cancelBubble = true; 
};

にも、同様の機能を実現する、外国大作家による宣伝が含まれています。 >

代码如下:

/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Dan Webb の domready.js Prototype extension
* と Simon Willison の addLoadEvent に感謝します
*
* 詳細については、次を参照してください:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/もう一度/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive /2004/05/26/addLoadEvent
*
*
* 使用方法: addDOMLoadEvent を関数で 1 回または複数回呼び出します。つまり、
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // その他のことを行います
* });
*
*/

addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
/ / タイマーを強制終了します
clearInterval(load_timer); // 追加された順序でスタック内の各関数を実行します
while (exec = load_events.shift())

if (script) script.onreadystate;変更 = ''; > };
return function (func) {
// init 関数がすでに実行されている場合は、今すぐこの関数を実行し、
if (done) return func();もし(! load_events[0]) {
// Mozilla/Opera9 の場合
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false); 🎜> // Internet Explorer の場合
/*@cc_on @*/
/*@if (@_win32)
document.write("

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7433

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

Illustrator でのプラグインの読み込みエラー [修正] Feb 19, 2024 pm 12:00 PM

Adobe Illustrator を起動すると、プラグインの読み込みエラーに関するメッセージが表示されますか?一部の Illustrator ユーザーは、アプリケーションを開いたときにこのエラーに遭遇しました。メッセージの後には、問題のあるプラグインのリストが続きます。このエラーメッセージは、インストールされているプラグインに問題があることを示していますが、Visual C++ DLL ファイルの破損や環境設定ファイルの破損など、他の理由によって発生する可能性もあります。このエラーが発生した場合は、この記事で問題を解決する方法を説明しますので、以下を読み続けてください。 Illustrator でのプラグインの読み込みエラー Adobe Illustrator を起動しようとしたときに「プラグインの読み込みエラー」エラーメッセージが表示された場合は、次の操作を行うことができます。管理者として

Stremio の字幕が機能しない; 字幕の読み込みエラー Feb 24, 2024 am 09:50 AM

Windows PC の Stremio で字幕が機能しませんか?一部の Stremio ユーザーは、ビデオに字幕が表示されないと報告しました。多くのユーザーが、「字幕の読み込みエラー」というエラーメッセージが表示されたと報告しています。このエラーとともに表示される完全なエラーメッセージは次のとおりです: 字幕の読み込み中にエラーが発生しました字幕の読み込みに失敗しました: これは、使用しているプラグインまたはネットワークに問題がある可能性があります。エラーメッセージにあるように、インターネット接続がエラーの原因である可能性があります。したがって、ネットワーク接続を確認し、インターネットが適切に機能していることを確認してください。これとは別に、このエラーの背後には、競合する字幕アドオン、特定のビデオコンテンツでサポートされていない字幕、古い Stremio アプリなど、他の理由が考えられます。のように

ハイパーリンクを挿入すると Outlook がフリーズする Feb 19, 2024 pm 03:00 PM

Outlook にハイパーリンクを挿入するときにフリーズの問題が発生した場合は、不安定なネットワーク接続、古い Outlook バージョン、ウイルス対策ソフトウェアによる干渉、またはアドインの競合が原因である可能性があります。これらの要因により、Outlook がハイパーリンク操作を適切に処理できない可能性があります。ハイパーリンクの挿入時に Outlook がフリーズする問題を修正する次の修正プログラムを使用して、ハイパーリンクの挿入時に Outlook がフリーズする問題を修正します。インストールされているアドインを確認する Outlook を更新するウイルス対策ソフトウェアを一時的に無効にして、新しいユーザープロファイルの作成を試行する Office アプリプログラムを修正する Office をアンインストールして再インストールする始めましょう。 1] インストールされているアドインを確認する Outlook にインストールされているアドインが問題の原因となっている可能性があります。

PHP は無限スクロール読み込みを実装します Jun 22, 2023 am 08:30 AM

インターネットの発展に伴い、スクロール読み込みをサポートする必要がある Web ページが増えています。無限スクロール読み込みもその 1 つです。これにより、ページに新しいコンテンツを継続的に読み込むことができるため、ユーザーはよりスムーズに Web を閲覧できるようになります。この記事では、PHPを使って無限スクロールローディングを実装する方法を紹介します。 1. 無限スクロールローディングとは何ですか?無限スクロール読み込みは、スクロールバーに基づいて Web コンテンツを読み込む方法です。その原理は、ユーザーがページの一番下までスクロールすると、AJAX を通じてバックグラウンドデータが非同期的に取得され、新しいコンテンツが継続的に読み込まれることです。このような積み込み方法

CSSが読み込めない問題の解決方法 Oct 20, 2023 am 11:29 AM

CSS を読み込めない問題の解決策には、ファイルパスの確認、ファイルの内容の確認、ブラウザのキャッシュのクリア、サーバー設定の確認、開発者ツールの使用、ネットワーク接続の確認などが含まれます。詳細な紹介: 1. ファイルパスを確認します。まず、CSS ファイルのパスが正しいことを確認してください。CSS ファイルが Web サイトの別の部分またはサブディレクトリにある場合は、正しいパスを指定する必要があります。 CSS ファイルはルートディレクトリにあり、パスは直接である必要があります。 ; 2. ファイルの内容を確認します。パスが正しい場合は、CSS ファイル自体に問題がある可能性があります。CSS ファイルを開いて確認してください。

Windows 7 が USB ドライバーのロードに失敗した場合はどうすればよいですか? Jul 11, 2023 am 08:13 AM

win7システムをインストールする際、一部のネチズンはUSBドライバーのロードに失敗し、USBデバイスが新しいwin7システムで認識されず、一般的なUSBフラッシュドライブ、マウスなどのデバイスが使用できない状況に遭遇しました。では、win7 のインストールで USB ドライバーのロードに失敗した場合はどうすればよいでしょうか? win7のインストール時にUSBドライバーのロードに失敗する問題を解決する方法をXiaobiに教えてもらいましょう。方法 1: 1. まず、コンピュータの電源を入れてコンピュータシステムに入り、コンピュータシステムのコンピュータシステムのバージョンを確認します。コンピューターシステムのバージョンとデバイスドライバーのバージョンが一致しているか確認してください。 2. ドライバーのバージョンを確認した後、USB デバイスをコンピューターシステムに接続します。コンピューターシステムは、デバイスがシステムに接続できないことを示しています。 3. 接続情報ページで、[ヘルプ] ボタンをクリックしてヘルプ情報を表示します。 4. コンピュータ部門の場合

Vue3 で DOM ノードを取得する方法は何ですか? May 11, 2023 pm 04:55 PM

1. ネイティブ js は DOM ノードを取得します。 document.querySelector (セレクター) document.getElementById (id セレクター) document.getElementsByClassName (クラスセレクター).... 2. vue2 で現在のコンポーネントのインスタンスオブジェクトを取得します。コンポーネントインスタンスには、対応する DOM 要素またはコンポーネントへの参照を保存する $refs オブジェクトが含まれています。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。まず ref="name" をコンポーネントに追加してから、this.$refs を渡します。

PHP での DOM 操作ガイド May 21, 2023 pm 04:01 PM

Web 開発において、DOM (DocumentObjectModel) は非常に重要な概念です。これにより、開発者は要素の追加、削除、変更など、Web ページの HTML または XML ドキュメントを簡単に変更および操作できるようになります。 PHP に組み込まれている DOM 操作ライブラリも開発者向けに豊富な機能を提供していますので、この記事では、皆様のお役に立てればと思い、PHP での DOM 操作ガイドを紹介します。 DOM の基本概念 DOM は、クロスプラットフォームで言語に依存しない API です。

See all articles

Dom は、画像をロードして実行できるようにするスクリプト コードをロードします_javascript スキル