您的位置:

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

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里吧.

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

本文目录一览: 1、页面重新加载js无限loading 2、有没有图片预加载的JS,我想要全部图片都加载转圈那个 3、js页面加载 4、求JS加载页跳转代码 5、怎么让页面加载完了,再执行js onl

2023-12-08
如何加载js代码(js怎么加载)

本文目录一览: 1、圈x添加js脚本怎么使用 2、如何在js中动态引入或加载js文件 3、怎样在网页中插入JavaScript代码 4、几种延迟加载JS代码的方法加快网页的访问速度 5、如何在网页加载

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js代码同步异步的简单介绍

本文目录一览: 1、怎样用JS实现异步转同步 2、JS Promise 同步和异步代码执行的区别 3、javascript同步和异步的区别与实现方式 4、js执行顺序+同步异步 5、js 是同步执行

2023-12-08
javascript简要笔记,JavaScript读书笔记

2022-11-17
js修改cssimportant的简单介绍

本文目录一览: 1、js如何直接修改css里面的属性值呢? 2、笔记:JS设置CSS样式的几种方式 3、如何用JS修改已加载的CSS样式表样式? 4、JS修改CSS设置的样式 5、如何使用jquery

2023-12-08
如何将js代码转换为ts代码的简单介绍

本文目录一览: 1、变成ts的步骤 2、什么是ts 编程 3、js怎么转化为typescript 4、 如何将JS代码更换成异步统计代码' title='˃ 如何将JS代码更换成异步统计代码'˃˃ 如

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
谁用js自动下载exe代码的简单介绍

本文目录一览: 1、怎样用JS实现文件下载功能,求函数,代码 2、javascript如何实现打开网站自动下载运行求代码 3、JS调用exe文件下载代码 如何写?高手快来 4、如何用JavaScrip

2023-12-08
网站抽奖系统js源码下载的简单介绍

本文目录一览: 1、超级抽奖系统的txt全集下载地址 2、怎么把一个网页的js代码下载 下来啊 3、用html5+js 做一个转盘抽奖怎么做,求源码! 4、做一个JAVA的抽奖系统 5、网站源代码怎么

2023-12-08
朋友圈分享的js代码,js微信分享朋友圈

2022-11-22
angularjs代码笔记01,angularjs简介

本文目录一览: 1、请问谁有混淆Angularjs代码的经验 2、如何使用angularjs处理动态菜单 3、如何看angularjs源代码 4、下回来的angularJs+bootstrap模板怎么

2023-12-08
js待办事项列表添加删除代码的简单介绍

本文目录一览: 1、“点击此处可添加笔记”的代码怎么写 2、js动态添加、删除html代码 3、vivo手机便签怎么一起删 “点击此处可添加笔记”的代码怎么写 输入符号就可以了第一步打开手机,点击备忘

2023-12-08
javascript入门笔记1的简单介绍

2022-11-18
怎样通过js获取数据库数据的简单介绍

本文目录一览: 1、js调用数据库里面的数据 2、js 如何读取数据库信息 3、javascript如何读取到数据库的信息 4、javascript中如何获取从数据库取出的数据? 5、JS 文件如何获

2023-12-08
js代码中script,js代码中的问号是什么意思

本文目录一览: 1、javascript中script的SRC属性 2、JS代码里加载script代码,并隐藏其内容怎么弄呢? 3、使用javascript必须使script标签吗 javascrip

2023-12-08
js噪点细胞代码下载的简单介绍

本文目录一览: 1、哪位介绍一下数码相机的一些知识,谢谢! 2、买数码相机时怎么样验货,要注意什么? 3、半导体激光为什么看起来有噪点? 4、买数码相机要注意的问题有哪些? 5、眼睛看东西的时候有噪点

2023-12-08
html标签中用js代码的简单介绍

本文目录一览: 1、求助:HTML点击按钮调用JS文件或者直接调用JS代码? 2、如何在html中调用js代码 3、怎么在html文件中调用js文件 4、HTML如何插入js? 求助:HTML点击按钮

2023-12-08
js代码修改余额的简单介绍

本文目录一览: 1、修改JS代码 2、JS写一个方法求一个最大提款金额值:已知现有金额,费率,提款金额三个参数通过方法得到可提取金额的最 3、【VUE】js将number数字转换为金额格式,类似于10

2023-12-08