前端常用动画效果和功能控制

图片延迟加载

许多网站的图片是在下拉滚动条时才加载，而此效果通常是用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。待后述。