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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-23 03:47
下一篇 2024-12-23 03:47

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    編程 2025-04-29
  • Java Bean加載過程

    Java Bean加載過程涉及到類加載器、反射機制和Java虛擬機的執行過程。在本文中,將從這三個方面詳細闡述Java Bean加載的過程。 一、類加載器 類加載器是Java虛擬機…

    編程 2025-04-29
  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下,我們可以寫出很長很長的一行代碼。但是,為了…

    編程 2025-04-29
  • QML 動態加載實踐

    探討 QML 框架下動態加載實現的方法和技巧。 一、實現動態加載的方法 QML 支持從 JavaScript 中動態指定需要加載的 QML 組件,並放置到運行時指定的位置。這種技術…

    編程 2025-04-29
  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述,力求讓讀者深刻理解Python基礎代碼。通過本文的學習,相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    編程 2025-04-29
  • Python簡單數學計算

    本文將從多個方面介紹Python的簡單數學計算,包括基礎運算符、函數、庫以及實際應用場景。 一、基礎運算符 Python提供了基礎的算術運算符,包括加(+)、減(-)、乘(*)、除…

    編程 2025-04-29
  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前,我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面: 1、庫存管…

    編程 2025-04-29
  • Python滿天星代碼:讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼,為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員,都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    編程 2025-04-29
  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面,為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手,選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    編程 2025-04-29

發表回復

登錄後才能評論