图片耽误加载

许多网站的图片是在下拉转动条时才加载，而此结果通常是用jQuery的lazyLoad或scrollLoading插件完成的。它能够耽误加载长页面中的图片。在浏览器可视地区外的图片不会被载入，直到用户将页面转动到它们地点的位置。在包括许多图片的长页面中耽误加载图片能够加速页面加载速率。另一方面也是由于同时加载大批图片时很轻易由于短时间内的大批http请求而致使有平常图片挂掉而显现一个丢脸的”X”。

道理剖析:

<img src="placeholder.gif" data-original="real.jpg">

运用耽误加载结果的网站，平常也会运用一个默许的图片来占位，比方优酷和bili。如许能够防备用户在转动过快时形成能够涌现的页面构造杂沓和图象一时加载不出来涌现的”x”。上面这行代码，真正的src值放在自定义的original属性中。

这个结果的完成是经由过程离别盘算浏览器可视地区的矩形(间隔top和left的间隔)和图片地点的矩形，求它们是不是订交，假如订交，则运用上面img标签中的data-original的值作为src的值，云云就完成了耽误加载的结果。越发详细的细节能够去检察相干源码完成。

// 推断两个矩形是不是订交,返回一个布尔值 
function intens(rec1, rec2){ 
    var lc1, lc2, tc1, tc2, w1, h1; 
    lc1 = rec1.left + rec1.width / 2; 
    lc2 = rec2.left + rec2.width / 2; 
    tc1 = rec1.top + rec1.height / 2 ; 
    tc2 = rec2.top + rec2.height / 2 ; 
    w1 = (rec1.width + rec2.width) / 2 ; 
    h1 = (rec1.height + rec2.height) / 2; 
    return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ; 
}

防备雷同事宜疾速反复触发

这里的触发能够理解为实行的意义，重要触及函数撙节的观点。
在前端需求中，为防备反复触发会请求短时间内某一事宜只能触发一次，比方表单提交时的ajax请求另有轮播图的转动(许多轮播图的转动并不如你点击鼠标的速率那末快，所以在触发的逻辑里一定对短时反复触发处置惩罚过)

function delay_exec(fn, wait) {
    if (_timer['id']) {
        window.clearTimeout(_timer['id']);
        delete _timer['id'];
    }

    return _timer['id'] = window.setTimeout(function () {
        fn();
        delete _timer['id'];
    }, wait);
}

var _timer = {};
$("#myid").bind("click", function(){
    delay_exec(function(){}, 300);
})

这个是只处置惩罚末了一次点击的状况，在不停点击的状况下，经由过程setTimeout的id存删,触发会延续向后耽误，只触发末了一次。
另一种是只处置惩罚第一次点击的状况，在指定的时间内不管点击多少次，只实行一次触发。有一个插件叫throttle，特地干这事。代码不长，有兴致的能够直接研读代码。

hover时显现材料

运用场景：新浪微博或许论坛，把鼠标放在名字上时会显现材料卡片，然则鼠标很快划过期并不会显现。针对这一功用，也有一个经常使用的jQuery插件——hoverIndent。待后述。