js:原生单张图片延迟加载(图片自己找)htmlcssjsutils.js(公共方法)

html css js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,img{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
            width: 700px;
            margin:2000px auto ;
        }
    </style>
</head>
<body>
<img src="img/default.jpg" alt="" id="img" trueImg="img/1.jpg">
<script src="utils.js"></script>
<script>
             var img=document.getElementById('img');
             function bindHtml(){
                 if(img.load){
                    return;
                 }
                 var winT=utils.win('scrollTop');
                 var winH=utils.win('clientHeight');

                 var curImgOffsetH=img.offsetHeight;
                 var curImgOffsetT=utils.offset(img).top;

                 if (winT+winH>=curImgOffsetT+curImgOffsetH){
                     var trueAdd=img.getAttribute('trueImg');
                     var newImg=document.createElement('img');
                     newImg.src=trueAdd;
                     newImg.onload=function(){
                         img.src=trueAdd;
                         img.load=true;//处理图片闪现的问题
                         fadeIn(img);
                     }
                 }
             }

             function fadeIn(curImg){
                     utils.css(curImg,'opacity',0.3);

                     var timer=setInterval(function(){
                               var val=Number(utils.css(curImg,'opacity'));
                               //console.log(val);//返回的是字符串'3',需要用Number()转化成数字
                               val+=0.1;
                               //console.log(val);//初始值加完0.1以后的值,设置的话,没滚动一次的话才能继续往上加
                               if(val>=1){
                                  utils.css(curImg,'opacity',1);
                                  clearInterval(timer);
                                  return;
                               }
                               //console.log(val);//每次加完设置完以后的值

                               utils.css(curImg,'opacity',val);
                     },300)
             }
             window.onscroll=function(){
                    bindHtml();
            }

</script>
</body>
</html>

utils.js(公共方法)

var utils = (function () {
    function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    };
    function getCss(curEle,attr) {
        var  val;
        if("getComputedStyle" in window){
            // 先判断是否支持getComputedStyle;
            val = getComputedStyle(curEle)[attr];
        }else{
            val = curEle.currentStyle[attr];
        }
        // 去单位
        var reg = /^(width|height|margin|padding|left|top|right|bottom|fontZise)$/;
        // 校验当前属性是否带有单位
        if(reg.test(attr)){
            // 判断是否为空；
            if(!isNaN(parseFloat(val))){
                val = parseFloat(val);
            }
        }
        return val;
    }
// setCss : 每执行一次，都会设置元素一个属性样式；
    function setCss(curEle,attr,val) {
        var  reg = /^(width|height|top|left|right|bottom|padding|margin)$/;
        if(reg.test(attr)){
            if(typeof val==="number"){
                val = val + "px";
            }
        }
        curEle.style[attr]=val;// 设置行内样式；
    }
    function setGroupCss(curEle,obj) {
        // 遍历obj;调用封装的setCss，设置元素的单个样式；
        for(var key in obj){
            setCss(curEle,key,obj[key])
        }
    }
    function css(...arg) {// 在函数定义的括号中，... 是剩余运算符；将所有的实参放入到一个数组中；
        //
        if(arg.length===3){
            // [oBox,"height",300]
            setCss(...arg);
        }else if(arg.length===2){
            if(toString.call(arg[1])==="[object Object]"){
                setGroupCss(...arg)
            }else{
                return getCss(...arg)
            }
        }
    }
    function win(attr,val) {
        // 如果是两个实参，那么一定是设置；如果是一个实参，是获取；
        if(val===undefined){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = val;
        document.body[attr] = val;


    }
    return {
        offset:offset,
        getCss:getCss,
        setCss:setCss,
        setGroupCss:setGroupCss,
        css:css,
        win:win
    }
})();

// 单例模式
/*
var utils= {
    offset:function offset(curEle) {
        var  l = curEle.offsetLeft;
        var  t = curEle.offsetTop;
        var p = curEle.offsetParent;
        while(p.nodeName !=="BODY"){
            l+=p.offsetLeft +p.clientLeft;
            t+=p.offsetTop+p.clientTop;
            p = p.offsetParent;
        }
        return {
            left:l,top:t
        }
    }
}*/