首页 web前端 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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在Illustrator中加载插件时出错[修复] 在Illustrator中加载插件时出错[修复] Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息?一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题,但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误,我们将在本文中指导您修复问题,请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息,您可以使用以下用途:以管理员身

Stremio字幕不工作;加载字幕时出错 Stremio字幕不工作;加载字幕时出错 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗?一些Stremio用户报告说,视频中没有显示字幕。许多用户报告说遇到了一条错误消息,上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息:加载字幕时出错加载字幕失败:这可能是您正在使用的插件或您的网络有问题。正如错误消息所说,可能是您的互联网连接导致了错误。因此,请检查您的网络连接,并确保您的互联网工作正常。除此之外,这个错误的背后可能还有其他原因,包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

PHP实现无限滚动加载 PHP实现无限滚动加载 Jun 22, 2023 am 08:30 AM

随着互联网的发展,越来越多的网页需要支持滚动加载,而无限滚动加载是其中的一种。它可以让页面不断加载新的内容,使用户可以更流畅地浏览网页。在这篇文章中,我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载?无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时,通过AJAX异步调取后台数据,实现不断加载新的内容。这种加载方

css加载不出来怎么解决 css加载不出来怎么解决 Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍:1、检查文件路径,首先请确保CSS文件的路径正确,如果CSS文件位于网站的不同部分或子目录中,需要提供正确的路径,如果CSS文件位于根目录下,路径应该是直接的;2、检查文件内容,如果路径正确,那么问题可能出在CSS文件本身,打开CSS文件检查等等。

插入超链接时Outlook冻结 插入超链接时Outlook冻结 Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题,可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题:检查已安装的加载项更新Outlook暂时禁用您的防病毒软件,然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

安装win7加载usb驱动失败怎么办 安装win7加载usb驱动失败怎么办 Jul 11, 2023 am 08:13 AM

在安装win7系统中,有网友遇到了加载usb驱动失败的情况,usb设备无法在新的win7系统中被识别,常见的u盘,鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办?下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一:1、首先我们打开电脑进入电脑系统,在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后,将USB设备连接到电脑系统。电脑系统显示,设备无法连接到系统。3、在连接信息页面,点击帮助按钮查看帮助信息。4、如果电脑系

Vue3获取DOM节点的方式有哪些 Vue3获取DOM节点的方式有哪些 May 11, 2023 pm 04:55 PM

1.原生js获取DOM节点:document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象:因为每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。所以在默认情况下,组件的$refs指向一个空对象。可以先在组件上加上ref="名字",然后通过this.$refs.

PHP中的DOM操作指南 PHP中的DOM操作指南 May 21, 2023 pm 04:01 PM

在网页开发中,DOM(DocumentObjectModel)是一个非常重要的概念。它可以让开发者轻松地对一个网页的HTML或XML文档进行修改和操作,比如添加、删除、修改元素等。而PHP中内置的DOM操作库也为开发者提供了丰富的功能,本文将介绍PHP中的DOM操作指南,希望可以帮助到大家。DOM的基本概念DOM是一个跨平台、独立于语言的API,它可以将

See all articles