dom樹，加載執行多函數之domReady

xfee 發布于2019-08-21 10:23 / 1886人閱讀

摘要：在日常的開發中，我們常常用來觸發執行函數，但是這往往不能滿足我們的要求，比如，的時候，我們要取得大量的加載到圖片的父級上，這個時候如果要是等到圖片都加載完畢后再賦值，那么有的用戶沒等看到圖片就點擊了，這樣就會出問題，所以，我們要在整個加載完

onload

在日常的開發中，我們常常用window.onload來觸發執行函數，但是這往往不能滿足我們的要求，比如，ajax的時候，我們要取得大量的url加載到圖片的父級上，這個時候如果要是等到圖片都加載完畢后再賦值，那么有的用戶沒等看到圖片就點擊了，這樣就會出問題，所以，我們要在整個dom加載完畢后，就立即執行一些函數，所以就有了domReady。

domReady

domReady這種叫法，好像是在jq中才這么叫的，真正的內容就是在火狐中有一個‘DOMContentLoaded’，而最近的也有很多現代瀏覽器接受了這種做法，但是在ie中就沒有辦法，但是在ie中，每個dom元素都有一個滾動條屬性，所以，這樣可以用做判斷，下面就是一個例子

例子

/**
 * [domReady 監聽Dom樹創建完畢執行參數]
 * @param  {[List]} fnList [dom執行完畢所執行的函數數組]
 * @return {[void]}        []
 */
    function domReady(fnList){
        if(!fnList)return undefined;
        if(document.addEventListener){
            document.addEventListener("DOMContentLoaded",function(){
                doFnList(fnList);//先進的瀏覽器
            },false)
          }else{
                try{
                    document.documentElement.doScroll("left");//在ie中每個元素都有一個doSroll屬性，看documentElement的滾動條屬性是否完畢，如果完畢就證明整個dom樹創建完畢，如果沒有創建完畢就訪問這個屬性會報錯，所以try catch了
                }catch(e){
                    setTimeout(arguments.callee,50)
                }
                doFnList(fnList);
           }
            var b = false; //只執行一次 
            /**
             * [doFnList 執行函數列表的方法]
             * @param  {[type]} fnList [dom執行完畢所執行的函數數組]
             * @return {[void]}        []
             */
            function doFnList(fnList){
              if(b)return;
              b = true;
              for(var i=0,fn;fn = fnList[i++];){
               //console.log(i)
                fn();
              }
                fnList = null;
                doFnList = null;
            }
    }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85432.html

JavaScript常用腳本集錦1

摘要：初始化參數可選參數，必填參數可選，只有在請求時需要參數可選回調函數可選參數可選，默認為參數可選，默認為創建引擎對象打開發送普通文本接收文檔將字符串轉換為對象最后，說明一下此函數的用法。即等待與成功回調，后標志位置為。 jquery限制文本框只能輸入數字 jquery限制文本框只能輸入數字,兼容IE、chrome、FF（表現效果不一樣）,示例代碼如下： $(input).keyup(...

ygyooo 2019-08-21 10:22 評論0 收藏0
使用性能API快速分析web前端性能

摘要：性能時間線以一個統一的接口獲取由和所收集的性能數據。瀏覽器支持下表列舉了當前主流瀏覽器對性能的支持，其中標注星號的內容并非來自于性能工作小組。頁面的性能問題一直是產品開發過程中的重要一環，很多公司也一直在使用各種方式監控產品的頁面性能。從控制臺工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange這種侵入式java...

mj 2019-08-21 10:48 評論0 收藏0
頁面加載事件--DOMContentLoaded

摘要：這個時候就出場了，它定義為當頁面文檔加載并解析完畢之后會馬上出發事件，而不會等待樣式文件圖片文件和子框架頁面的加載。 DOMContentLoaded 和 window.onload 的區別當頁面完全加載完畢后會觸發 window.onload 事件，我們知道可以利用 window.onload 事件來觸發并執行需要頁面完全加載完畢后才能執行的 javascript 腳本，但是假如頁...

Tikitoo 2019-08-20 14:48 評論0 收藏0
頁面加載事件--DOMContentLoaded

摘要：這個時候就出場了，它定義為當頁面文檔加載并解析完畢之后會馬上出發事件，而不會等待樣式文件圖片文件和子框架頁面的加載。 DOMContentLoaded 和 window.onload 的區別當頁面完全加載完畢后會觸發 window.onload 事件，我們知道可以利用 window.onload 事件來觸發并執行需要頁面完全加載完畢后才能執行的 javascript 腳本，但是假如頁...

jkyin 2019-08-01 16:26 評論0 收藏0
Require.js實現js模塊化管理教程

摘要：再者，引入一大堆的文件也不美觀，而使用即可實現的模塊化異步加載。通過定義模塊的方式可分為以下兩類。當和這兩個模塊加載完成之后將會執行回調函數。插件可以使回調函數在結構加載完成之后再執行。最好的方式是使用字符串但這很難管理尤其實在多行的時候。什么是Require.js Require.js是一個AMD規范的輕量級js模塊化管理框架，最新版本require.js 2.1.11壓縮后只有1...

fox_soyoung 2019-08-20 12:21 評論0 收藏0