UseStudio.CloudFront/controls/pc/Loading/loading.js

/*进度条*/
//杨俊源
//命名空间
Namespace.register("U.Control.Bar");
//调用的主函数  返回Content
//U.Control.Bar.loadImg(src,width,height)
U.Control.Bar.Box = function () {
    return document.body.appendChild(U.Control.Bar.loadImg("http://fs.1473.cn/3e5b78e0-6ded-4386-b643-dd27d15fc007.jpg", 500, 600)); //传参(src,width,height)
}
//加载图片
U.Control.Bar.loadImg = function (imgUrl, width, height) {
    //var content = $("#"+content)[0];
    //创建一个div
    var content = $$("div", { "id": "Image", "style": { "cssText": "width:" + width + "px;height:" + height + "px"} });
    // content.style.position = "relative";
    content.style.position = "absolute";
    //div的底层
    var bg = $$("img", { "style": { "cssText": "width:100%;height:100%;opacity:1;position:absolute;"} }, content);
    //div遮罩层
    var divs = $$("div", { "style": { "cssText": "width:100%;height:100%;background:#fff;opacity: 1;transition: 0.8s all;position: relative;"} }, content);
    //进度条。。。
    var progress = $$("div", { "style": { "cssText": "width: 100%;height: 28px;border-radius: 16px;background: rgb(33, 176, 252);position: absolute;display: inline-block;top: 50%;margin-top: -14px;"} }, divs);
    var div = $$("div", { "style": { "cssText": "width: 99%;height: calc(100% - 10px);margin: auto;border-radius: 16px;background: rgb(255, 255, 255);margin-top: 4px;border: 1px solid #fff;"} }, progress);
    var bar = $$("div", { "style": { "cssText": "width: 0%;height: 100%;background: rgb(33, 176, 252);border-radius: 16px;transition: 4s all;"} }, div);
    //var barA = $$("div",{"style":{"cssText":"float:right"}},bar);
    //var barF = $$("a",{"innerHTML":"1"},barA);
    //var barFB = $$("a",{"innerHTML":"%"},barA);
    //进度条上下居中
    //progress.style.top = (parseInt(content.style.width)-progress.offsetHeight)/2+"px";
    setTimeout(function () { bar.style.width = "98%"; }, 1);
    //$(bar).animate({"width":"98%"},1000);
    //bar.style.width="98%";
    var img = new Image();
    img.src = imgUrl;
    //图片加载完成
    img.onload = function () {
        $(bar).animate({ "width": "100%" }, 100);
        setTimeout(function () { divs.style.cssText += "opacity:0"; U.Alert("加载完成"); }, 2000);
        bg.src = img.src;     
    }

    return content;
}
/*U.Control.Bar End*/