Question

此时我正在使用JQuery为我的images数组进行预加载。在我看到图像（幻灯片）之前，我看到一个加载图像的JQuery效果屏幕，然后它就会褪色，我看到了幻灯片。

我想要做的是使用另一个JQuery，但这次没有一个屏幕会预先加载图片但是要做到这一点：

加载第一张图片以显示/显示幻灯片中的第一张图片但尚未显示按钮。
要在第一个图像上显示/ dsiplay，作为一个微调器预加载器的jquery应该加载里面有百分比的图像，当它完成所有其余图像的加载时，然后开始幻灯片放映。

这是我现在的HTML代码：

<!DOCTYPE html>
<html lang="en">


<meta
    name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0"
/>

<link
    type="text/css"
    rel="stylesheet"
    href="Screen.css"
    media="screen,projection,tv"
/>
<style>
#preloader { width: 100%; height: 900px; background:#000; position:fixed; left:0; top:0; text-align: center; z-index:9999999999;}
#loadingbar { width: 245px; height: 245px; text-align: center; color: #fff; background: url(../img/preload_bg.gif) no-repeat 0 245px; margin-left: 38%; margin-top: 11%;}
#loadingtext { 

padding: 10px 0 0; 

font-size:18px;


}
</style>

<title>
    Slidehow Demo -  - Site Title
</title>


<link rel="stylesheet" href="css/preloader.html" type="text/css" />

</head><body>

    <div id="preloader">
  <div id="loadingbar"><img src="http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif" width="345" height="245" alt="Preload Logo" /></div>
                    <div id="loadingtext"  style="color:#FFF;" ></div>
</div>
    <div id="slideShow">



    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002409.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003136.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005721.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002203.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002202.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000010.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" alt="slide" />            



    <!-- #slideShow --></div>

    <script type="text/javascript" src="SlideShow.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="script/lib/jquery-1.8.2.min.js"><\/script>')</script> 
    <script type="text/javascript">
(function($) {

    var imgList = [];

    $.extend({

        preload: function(imgArr, option) {

            var setting = $.extend({

                init: function(loaded, total) {},

                loaded: function(img, loaded, total) {},

                loaded_all: function(loaded, total) {}

            }, option);

            var total = imgArr.length;

            var loaded = 0;



            setting.init(0, total);

            for(var i in imgArr) {

                imgList.push($("<img />")

                    .attr("src", imgArr[i])

                    .load(function() {

                        loaded++;

                        setting.loaded(this, loaded, total);

                        if(loaded == total) {

                            setting.loaded_all(loaded, total);

                        }

                    })

                );

            }



        }

    });

})(jQuery);





$(function() {
    $.preload([
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002409.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003136.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005721.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002203.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002202.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000010.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif",





        ], {

        init: function(loaded, total) {

            $(".wrapper").hide();

            $("#loadingtext").html("L o a d i n g ... p l e a s e   w a i t");

        },

        loaded: function(img, loaded, total) {

            var loader = 245-((loaded/total)*245);

            var prozent = Math.round(loaded/total*100);

            $("#loadingtext").html("L o a d i n g : "+prozent+"%");

            //$("#loadingtext").html("Lade jede Menge Inhalte: "+loaded+"/"+total);

            $("#loadingbar").css({"background-position" : "0px "+loader+"px"});

        },

        loaded_all: function(loaded, total) {
            $("#loadingtext").html("L o a d e d");
            $("#preloader").delay(500).fadeOut();
            $(".wrapper").delay(1000).fadeIn("slow");
        }

    });



});


</script>

</body>
</html>

然后我有两个其他文件，一个用javascript，另一个用样式（css）。文件名是：SlideShow.js和Screen.css

这是我的网站，现在是jquery：

Website

问题是如何实现我想在这种情况下使用的新JQuery：

bitbucket.org/Better2Web/jquery.percentageloader

如何在HTML代码中实现新的JQuery？

0 个答案: