本文目錄一覽:
- 1、頁面重新加載js無限loading
- 2、有沒有圖片預加載的JS,我想要全部圖片都加載轉圈那個
- 3、js頁面加載
- 4、求JS加載頁跳轉代碼
- 5、怎麼讓頁面加載完了,再執行js onload好像是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里吧.
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/286360.html