jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

最新推荐文章于 2022-08-30 11:23:35 发布

a52071453

最新推荐文章于 2022-08-30 11:23:35 发布

阅读量213

点赞数

分类专栏： javascript 文章标签： javascript xhtml php ViewUI

本文链接：https://blog.csdn.net/a52071453/article/details/84413652

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

链接主题：

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

第五种加载图片

       Html代码   
       
     
<html>  
<head>  
<title>JavaScript图片预加载代码，显示loading</title>  
  
<style type="text/css">  
    div{  
        border:#aaaaaa 3px solid;  
        width:200px;  
        padding:2px;  
        margin:2px 9px;  
        font-size:12px;  
        line-height:22px;  
        color:#999999;  
    }  
  
    .ipt1{  
        width:160px;  
        font-size:12px;  
        color:#1F6478;  
        border:#999999 1px solid;  
        margin-left:9px;  
    }  
  
    .ipt2{  
        border:#999999 1px solid;  
        margin-left:6px;color:#666666；  
    }  
  
    p{  
        margin:0px;  
        padding:0px;  
        background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);  
        background-position:center;  
        background-repeat:no-repeat;  
        width:200px;  
        height:200px;  
        text-align:center;  
        font-size:12px;  
        color:#999999;  
        line-height:26px;  
    }  
</style>  
  
<script language="javascript" type="text/javascript">  
    function preloadimg(url,obj,ipt){  
        var img = new Image();  
        obj.innerHTML = "<p>Loading...</p>";  
        img.onload = function(){  
            obj.innerHTML = "";  
            obj.style.width = String(img.width)+"px";  
            ipt.style.width = String(img.width-40)+"px";  
            obj.appendChild(img);  
        };  
  
        img.onerror = function(){  
            obj.innerHTML="Loading Fail !"  
        };  
  
        img.src = url; //img.src 一定要写在img.onload之后，否则在IE中会出现问题  
    }  
  
    function show(){  
        var div = document.getElementsByTagName("div")[0];  
        var input = document.getElementsByTagName("input");  
  
        preloadimg("http://www.codefans.net/jscss/demoimg/wall9.jpg",div,input[0]);  
        input[0].onclick = function(){this.value=""};  
        input[1].onclick = function(){preloadimg(input[0].value,div,input[0]);}  
    }  
    window.onload = show;  
</script>  
  
</head>  
  
<body>  
<div></div><br />  
<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>  
</body>  
</html>  

或者使用

       Java代码   
       
     
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>  
<script src="MinmyLazyload.js" type="text/javascript"></script>  
<body>  
<img original="http://justcoding.iteye.com/uploadfiles/20100424-2_20914.jpg">  
<img original="http://justcoding.iteye.com/uploadfiles/20100423-1_85399.jpg">  
<script type="text/javascript">$("img").lazyload({ placeholder: "img-loader.gif", effect:"fadeIn" });  
</script>  
</body>   

minimylazyload.js 在附件中找

第六种本页

      Html代码   
      
    
<style>  
    #loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px}  
</style>  
  
<body>  
    <div id="loading">页面加载中…</div>  
       
    ..........  
       
    <script type="text/javascript">  
        document.write('<style>#loading{display:none;}</style>');  
    </script>  
</body>  
</html>  

a52071453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

链接主题：预加载图片延迟加载图片 Lazy Load javascript图片浏览器的核心——图片预加载第一种方法：页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。 ...
复制链接

扫一扫