js加载转圈代码的简单介绍

发布时间:2023-12-08

js加载转圈代码的简单介绍

更新:

本文目录一览:

页面重新加载js无限loading

把top勾选去掉。

把top勾选去掉,页面就不会一直loading,可以用JS代码再巩固一下。

有没有图片预加载的JS,我想要全部图片都加载转圈那个

图片不的SRC地址不填真实地址,填loading图片(就是转圈的图片)地址,把真实的图片地址放到图片的title或者alt或者其它自定义属性上,然后在页面的onload 事件中(js),用是js遍历所有图片,然后预加载图片地址,加载完成后,把真实地址从title或者alt或者其它自定义属性上赋到src上即可,明天白天给你示例,留邮箱我

js页面加载

这个很简单,你PHP程序运行结束后可以echo出一段脚本比如:

echo "script language='javascript'fadeOut()/script";

然后html js脚本可以这么写:

div id="loading"

程序加载中,请稍等.....

(里面可以放你要的等待转圈的图片或者将其设置为背景图)

/div

script language='javascript'

function fadeOut(){

document.getElementById("loading").style.display="none";

}

/script

求JS加载页跳转代码

我刚好写了这么一个js效果。

css部分:

.cdiv1 {

    position:absolute;

    left:0px;

    top:0px;

    z-index:15000;

    overflow:hidden;

    z-index: 9990;

    background:rgba(000, 000, 000, 0.3);

}

.cdiv2 {

    height:60px;

    width:150px;

    /*border:1px solid blue;*/

    position:fixed;

    top:45%;

    left:50%;

     z-index: 9999;

    margin-left:-75px;

     -webkit-border-radius:10px;

    text-align:center;

    line-height:60px;

    font-size:15px;

    font-family:微软雅黑;

}

.cdiv2 div {

    clear:none;

    height:15px;

}

.show_div{

    display:block;

    width:100%;

    min-height:50px;

    height:auto;

    background:rgba(255, 255, 255, 1);

    line-height:50px;

    text-align:center;

    border-radius: 5px;

    border:1px solid #ccc;

    position:absolute;

    z-index: 1800;

}

js部分:

var _cdiv = "",ktime;

function creatDiv() {

    var _height = $(document.body).height();

    var _width = $(document.body).width();

    _cdiv += "div class='cdiv1'";

    _cdiv += "/div";

    _cdiv += "div class='cdiv2'";

    _cdiv += "div id='showimgs'img src='../App_Themes/images/wait.gif' width='45px;' height='45px;' //div";

    //_cdiv += "div加载中.../div";

    _cdiv += "/div";

    $(document.body).append(_cdiv);

    $(".cdiv1").css("height", _height + "px").css("width", _width + "px");

}

function showDiv() {

    if ($(".cdiv1").attr("class") != undefined) {

        $("#showimgs").html("img src='../App_Themes/images/wait.gif' width='45px;' height='45px;' /");

        $("#showimgs").removeClass("show_div");

        $(".cdiv1").fadeIn(50);

        $(".cdiv2").fadeIn(5);

    } else {

        creatDiv();

    }

}

function appendText(){

    if ($(".cdiv1")) {

        $("#showimgs").html("网络异常,请检查网络");

        $("#showimgs").addClass("show_div");

        setTimeout(function(){hideDiv();},2000);

    }

}

function hideDiv() {

    window.clearInterval(ktime);

    $(".cdiv1").hide();

    $(".cdiv2").hide();

}

function startDiv(){

    ktime= setTimeout(function () { appendText(); }, 15 * 1000);

    showDiv();

}

调用方法:

startDiv();

加载完成后停止调用:

hideDiv();

效果图:

我这个是app端的。刚刚测试了下,一样适用于pc端。

代码说明:

1、这个加载转圈的图片你可以替换成文字“加载中...”,不能和图片同时存在(因为感觉比较丑)!

2、单出现网络问题时,会自动显示"网络异常,请检查网络",而这个显示不是检测请求的时间的。是设置最长时间的。如果再最长时间内,无法完成请求。就会显示出这个。这个显示出来2秒左右会自动消失。时间设置位置startDiv方法(转圈图片显示最长时间)。

3、加载转圈开始后,一定要在加载结束后调用停止的方法,否则就算请求完成了,依然会显示"网络异常,请检查网络"

比如(1个请求方法):

function state(){

//开始请求数据

//调用加载转圈效果

startDiv();

//开始请求数据

$.get("",{},function(){

  //数据请求完成后调用停止加载效果(或者在请求完成后,并且做好相应处理后调用)

  hideDiv();

});

}

如果有超过2个的方法的话方案一:

//定义一个变量,用于计算方法请求完成的个数

int index=0;

//请求方法1

function state1(){

//方法请求完成后,变量+=1

index+=1;

if(index==2){

//调用停止效果

hideDiv();

}

}

//请求方法2

function state2(){

//方法请求完成后,变量+=1

index+=1;

if(index==2){

//调用停止效果

hideDiv();

}

}

//使用一个方法,在这个方法里面调用其他的方法,并且调用加载效果

function fun(){

 //调用加载转圈效果

startDiv();

//调用方法1

state1();

//调用方法2

state2();

}

方案二:

//使用jq的延迟调用方法:jQuery.when。或者使用jq插件deferred(deferred.then),

deferred.then(state1).then(state2);//最后调用的是state2方法,那就在state2方法里面停止效果

怎么让页面加载完了,再执行js onload好像是js一起执行了 意思是页面加载完了,不转圈了,再执行js,求助

script

!--

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.

function subSomething()

{

if(document.readyState == "complete"window.parent.frames["框架名"].document.readyState == "complete") //当页面加载状态为完全结束时进入

myform.submit(); //这是你的操作

}

//--

/script

--------------

那就再加个IF条件呗:

window.parent.frames["mainFrame"].document.readyState == "complete"

上面代码已修改.

--------------

没有name就加个name呗.而且就算没有name也照样可以那么写啊.没有影响的.

或者你也可以这么写:

window.parent.frames.框架名.document.....

--------------

P了..加的是if条件.你循环顶什么用.照你这么循环.只要第一个frame加载完就直接执行了.哪儿还能循环到下一个frame.

老老实实把想判断的frame加到if里吧.