웹 프론트엔드 JS 튜토리얼 Dom加载让图片加载完再执行的脚本代码_javascript技巧

Dom加载让图片加载完再执行的脚本代码_javascript技巧

May 16, 2016 pm 07:04 PM
dom

现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序。 

       先介绍两个人。一,jquery的作者:John Resig;二,javascript的世界级大师:dean edwards。(大家要记住这两位天才!) 

      jquery里有专门解决DOM加载的函数$(document).ready()(简写就是$(fn)),非常好用!John Resig在《Pro JavaScript Techniques》里,有这样一个方法处理DOM加载,原理就是通过document&& document.getElementsByTagName &&document.getElementById&& document.body 去判断Dom树是否加载完毕。代码如下:

复制代码 代码如下:

function domReady( f ) {
// 如果DOM加载完毕,马上执行函数
if ( domReady.done ) return f();   
// 假如我们已增加一个函数
if ( domReady.timer ) { 
// 把它加入待执行的函数清单中
domReady.ready.push( f ); 
} else { 
// 为页面加载完成绑定一个事件, 
// 为防止它最先完成. 使用 addEvent(下面列出).
addEvent( window, “load”, isDOMReady );   
// 初始化待执行的函数的数组
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[i]();   
// 记录在此已经完成
domReady.ready = null; 
domReady.done = true; 

}
// 由 Dean Edwards 在2005 所编写addEvent/removeEvent,
// 由 Tino Zijdel整理
// http://dean.edwards.name/weblog/2005/10/add-event/
//优点是1.可以在所有浏览器工作;
//2.this指向当前元素;
//3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数
//缺点就是仅在冒泡阶段工作
function addEvent(element, type, handler) {
    // assign each event handler a unique ID
    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    // create a hash table of event types for the element
    if (!element.events) element.events = {};
    // create a hash table of event handlers for each element/event pair
    var handlers = element.events[type];
    if (!handlers) {
        handlers = element.events[type] = {};
        // store the existing event handler (if there is one)
        if (element["on" + type]) {
            handlers[0] = element["on" + type];
        }
    }
    // store the event handler in the hash table
    handlers[handler.$$guid] = handler;
    // assign a global event handler to do all the work
    element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
    // delete the event handler from the hash table
    if (element.events && element.events[type]) {
        delete element.events[type][handler.$$guid];
    }
};
function handleEvent(event) {
    var returnValue = true;
    // grab the event object (IE uses a global event object)
    event = event || fixEvent(window.event);
    // get a reference to the hash table of event handlers
    var handlers = this.events[event.type];
    // execute each event handler
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
};
function fixEvent(event) {
    // add W3C standard event methods
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
};
fixEvent.preventDefault = function() {
    this.returnValue = false;
};
fixEvent.stopPropagation = function() {
    this.cancelBubble = true;
};

还有一个估计由几个外国大师合作写的,实现同样功能。
复制代码 代码如下:

/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent

*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
*    function something() {
*       // do something
*    }
*    addDOMLoadEvent(something);
*
*    addDOMLoadEvent(function() {
*        // do other stuff
*    });
*
*/

addDOMLoadEvent = (function(){
    // create event function stack
    var load_events = [],
        load_timer,
        script,
        done,
        exec,
        old_onload,
        init = function () {
            done = true;
            // kill the timer
            clearInterval(load_timer);
            // execute each function in the stack in the order they were added
            while (exec = load_events.shift())
                exec();
            if (script) script.onreadystatechange = '';
        };
    return function (func) {
        // if the init function was already ran, just run this function now and stop
        if (done) return func();
        if (!load_events[0]) {
            // for Mozilla/Opera9
            if (document.addEventListener)
                document.addEventListener("DOMContentLoaded", init, false);
            // for Internet Explorer
            /*@cc_on @*/
            /*@if (@_win32)
                document.write("<script><\/scr"+"ipt>"); <BR> script = document.getElementById("__ie_onload"); <BR> script.onreadystatechange = function() { <BR> if (this.readyState == "complete") <BR> init(); // call the onload handler <BR> }; <BR> /*@end @*/ <BR> // for Safari <BR> if (/WebKit/i.test(navigator.userAgent)) { // sniff <BR> load_timer = setInterval(function() { <BR> if (/loaded|complete/.test(document.readyState)) <BR> init(); // call the onload handler <BR> }, 10); <BR> } <BR> // for other browsers set the window.onload, but also execute the old window.onload <BR> old_onload = window.onload; <BR> window.onload = function() { <BR> init(); <BR> if (old_onload) old_onload(); <BR> }; <BR> } <BR> load_events.push(func); <BR> } <BR>})();<BR></script>
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Illustrator에서 플러그인 로드 중 오류 발생 [수정됨] Feb 19, 2024 pm 12:00 PM

Illustrator에서 플러그인 로드 중 오류 발생 [수정됨]

Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다. Feb 24, 2024 am 09:50 AM

Stremio 자막이 작동하지 않습니다. 자막을 로드하는 중 오류가 발생했습니다.

PHP는 무한 스크롤 로딩을 구현합니다. PHP는 무한 스크롤 로딩을 구현합니다. Jun 22, 2023 am 08:30 AM

PHP는 무한 스크롤 로딩을 구현합니다.

CSS를 로드할 수 없는 문제를 해결하는 방법 CSS를 로드할 수 없는 문제를 해결하는 방법 Oct 20, 2023 am 11:29 AM

CSS를 로드할 수 없는 문제를 해결하는 방법

하이퍼링크를 삽입하면 Outlook이 정지됩니다. 하이퍼링크를 삽입하면 Outlook이 정지됩니다. Feb 19, 2024 pm 03:00 PM

하이퍼링크를 삽입하면 Outlook이 정지됩니다.

Windows 7에서 USB 드라이버를 로드하지 못하는 경우 어떻게 해야 합니까? Windows 7에서 USB 드라이버를 로드하지 못하는 경우 어떻게 해야 합니까? Jul 11, 2023 am 08:13 AM

Windows 7에서 USB 드라이버를 로드하지 못하는 경우 어떻게 해야 합니까?

Vue3에서 DOM 노드를 얻는 방법은 무엇입니까? Vue3에서 DOM 노드를 얻는 방법은 무엇입니까? May 11, 2023 pm 04:55 PM

Vue3에서 DOM 노드를 얻는 방법은 무엇입니까?

PHP의 DOM 조작 가이드 PHP의 DOM 조작 가이드 May 21, 2023 pm 04:01 PM

PHP의 DOM 조작 가이드

See all articles