A-A+

图片的异步加载

2015年12月07日 JavaScript 暂无评论 阅读 60 次

图片的异步加载

2211代码如下:
<img src = "http://www.siyuweb.com/wp-content/themes/Ality/img/default.jpg" class="loadsrc" loadsrc="http://www.siyuweb.com/wp-content/uploads/2015/11/QQ%E5%9B%BE%E7%89%8720151129224826.png" width="300" height="260">

<script>
    window.onload = function(){

        var oImg = getByClass(document,"loadsrc");
//        滑块滑过的距离
        var oSH = document.documentElement.scrollTop ||document.body.scrollTop;
//        可视窗口的宽度
        var oDoc = document.documentElement.clientHeight;
        for(var i =0;i<oImg.length;i++){
//祖先高度小雨滑动+可视区域高度,进行替换.
            if(getHeight(oImg)<(oSH+oDoc))
            {
            oImg[i].setAttribute("src", oImg[i].getAttribute("loadsrc"))
                    }
        }
    };
    //offsetParent() 方法返回最近的祖先定位元素。
    //定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
    ///可以通过 jQuery 设置 position,或者通过 CSS 的 position 属性。
function getHeight(obj){
    var h=0;
    while(obj.offsetParent){
        h+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return h;
}

//通过类名查找元素
    function getByClass(oParent,sClass){
        var aResult=[];
        var aEle=oParent.getElementsByTagName('*');
        for(var i=0;i<aEle.length;i++){
            /*将每个className拆分*/
            var arr=aEle[i].className.split(/\s+/);
            for(var j=0;j<arr.length;j++){
                /*判断拆分后的数组中有没有满足的class*/
                if(arr[j]==sClass){
                    aResult.push(aEle[i]);
                }
            }
        }
        return aResult;
    }

</script>

 

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录