如何知道 window 的 load 事件已经触发

背景

为了使页面加载更快,常常将一些不重要的第三方脚本在页面完成加载后进行懒加载。

// 做一些不影响业务的事情
window.addEventListener('load', () => {
  // 懒加载埋点分析
  loadScript({
    url: 'https://www.domain.com/test.js',
    timeout: 10000
  }).then(() => {
    console.log('ok');
  }).catch(console.error);
  // 其他
  // ...
});

“如何知道 window 的 load 事件已经触发”继续阅读

讲讲 Promise/实战

一、什么是 Promise

1.1 Promise 的前世今生

Promise 最早出现在 1988 年,由 Barbara LiskovLiuba Shrira 首创(论文:Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems)。并且在语言 MultiLispConcurrent Prolog 中已经有了类似的实现。

JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:QWhenBluebird

// Q / 2010
import Q from 'q'

function wantOdd () {
    const defer = Q.defer()
    const num = Math.floor(Math.random() * 10)
    if (num % 2) {
        defer.resolve(num)
    } else {
        defer.reject(num)
    }
    return defer.promise
}

wantOdd()
    .then(num => {
        log(`Success: ${num} is odd.`) // Success: 7 is odd.
    })
    .catch(num => {
        log(`Fail: ${num} is not odd.`)
    })

由于 jQuery 并没有严格按照规范来制定接口,促使了官方对 Promise 的实现标准进行了一系列重要的澄清,该实现规范被命名为 Promise/A+。后来 ES6(也叫 ES2015,2015 年 6 月正式发布)也在 Promise/A+ 的标准上官方实现了一个 Promise 接口。

new Promise( function(resolve, reject) {...} /* 执行器 */  );

想要实现一个 Promise,必须要遵循如下规则:

  1. Promise 是一个提供符合标准then() 方法的对象。
  2. 初始状态是 pending,能够转换成 fulfilledrejected 状态。
  3. 一旦 fulfilledrejected 状态确定,再也不能转换成其他状态。
  4. 一旦状态确定,必须要返回一个值,并且这个值是不可修改的。

“讲讲 Promise/实战”继续阅读

Bootstrap实战 – 瀑布流布局

讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多。这里用一些当前流行的网页布局为导向,使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点,边学边练,加强理解。练习本案例需有 HTML/CSS 基础。

一、案例介绍

瀑布流是近几年流行起来的一种网页布局,视觉表现为参差不齐的多栏布局,本案例便是使用 Bootstrap 实现一个瀑布流布局。

“Bootstrap实战 – 瀑布流布局”继续阅读

jQuery AJAX 遮罩实例

function transferip()
{
    var site_list=$("textarea[name='Oldsite']").val();
    var ip_list=$("textarea[name='Oldip']").val();
    var ip_new=$("input[name='Newip']").val();
    if(ip_list==""||ip_new=="")
    {
        alert('IT CANNOT BE EMPTY!');
        return false;
    }
    ajaxStar("LOADING...");
    $.ajax(
    {
        type:"post",
        url:"transip.mazey",
        data:{"search":"check_ip","ip_list":escape(ip_list),"ip_new":ip_new,"site_list":escape(site_list)},
        error:function(){
            ajaxClose();
            alert("SYSTEM ERROR!");
        },
        success:function(msg)
        {
            ajaxClose();
            var msgArr=msg.split("-|-")
            if(msgArr[0]=="413")
            {
                alert(msgArr[1]);
            }
            else
            {
                alert(msgArr[1]);
            }

        }
    }
    )
}

/**div加载ajax效果***/
function ajaxStar(str,e){//str提示信息  e:iframe框访
    var html="";
    html+="<div id='ajaxLoadDiv'></div>";
    html+="<div class='ajaxLoadIcon'>";
    html+= "<span class='ajaxIcon'></span>";
    if(str)
        html+="<span class='ajaxInfo'>"+str+"</span>";
    html+="</div>";
    $("body").append(html);    
    var divH=$(document).height();//-$("#admin_topbj").height();
    $("#ajaxLoadDiv").css({"height":divH,"top":0,"opacity":0.5});
    var iconTop=$(window).height()/2;
    iconTop=iconTop+$(document).scrollTop();
    $(".ajaxLoadIcon").css({"top":iconTop+"px"});
}

/****关闭ajax遮罩*****/
function ajaxClose(){    
    $("#ajaxLoadDiv").remove();
    $(".ajaxLoadIcon").remove();    
}

function look_seven(){
    window.location.href="/Setinmanager/winhost/migratejob/record.asp";
}

“jQuery AJAX 遮罩实例”继续阅读