[JavaScript] Preload, modyfikacja Opcje

[pantera366]

Witam oto moja strona http://www.pantera366.vooa.pl/ nieukończona oczywiscie.Skrypt polega na preloadzie obrazków.Chodzi mi o to żeby ten preload działał tylko przy wchodzeniu na stronę główną bo na razie działa on także przy przechodzeniu z podstron na stronę główna np z działu kontakt do home. Oto kod skryptu,skrypt nie jest mojego autorstwa wprowadziłem jedynie kilka zmian

Kod

var QueryLoader = {
        /*
         * QueryLoader          Preload your site before displaying it!
         * Author:                      Gaya Kessler
         * Date:                        23-09-09
         * URL:                         http://www.gayadesign.com
         * Version:                     1.0
         *
         * A simple jQuery powered preloader to load every image on the page and in the CSS
         * before displaying the page to the user.
         */
      
        overlay: "",
        loadBar: "",
        preloader: "",
        items: new Array(),
        doneStatus: 0,
        doneNow: 0,
        selectorPreload: "body",
        ieLoadFixTime: 300,
        ieTimeout: "",
              
        init: function() {
                if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
                        //break if IE6                
                        return false;
                }
                if (QueryLoader.selectorPreload == "body") {
                        QueryLoader.spawnLoader();
                        QueryLoader.getImages(QueryLoader.selectorPreload);
                        QueryLoader.createPreloading();
                } else {
                        $(document).ready(function() {
                                QueryLoader.spawnLoader();
                                QueryLoader.getImages(QueryLoader.selectorPreload);
                                QueryLoader.createPreloading();
                        });
                }
              
                //help IE drown if it is trying to die <img src="./images/smilies/icon_e_smile.gif" alt=":)" title="Uśmiech" />
                QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
        },
      
        ieLoadFix: function() {
                var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
                if (ie[0].match("MSIE")) {
                        while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
                                QueryLoader.imgCallback();
                        }
                }
        },
      
        imgCallback: function() {
                QueryLoader.doneNow ++;
                QueryLoader.animateLoader();
        },
      
        getImages: function(selector) {
                var everything = $(selector).find("*:not(script)").each(function() {
                        var url = "";
                      
                        if ($(this).css("background-image") != "none") {
                                var url = $(this).css("background-image");
                        } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
                                var url = $(this).attr("src");
                        }
                      
                        url = url.replace("url(\"", "");
                        url = url.replace("url(", "");
                        url = url.replace("\")", "");
                        url = url.replace(")", "");
                      
                        if (url.length > 0) {
                                QueryLoader.items.push(url);
                        }
                });
        },
      
        createPreloading: function() {
                QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
                $(QueryLoader.preloader).css({
                        height:         "0px",
                        width:          "0px",
                        overflow:       "hidden"
                });
              
                var length = QueryLoader.items.length;
                QueryLoader.doneStatus = length;
              
                for (var i = 0; i < length; i++) {
                        var imgLoad = $("<img></img>");
                        $(imgLoad).attr("src", QueryLoader.items[i]);
                        $(imgLoad).unbind("load");
                        $(imgLoad).bind("load", function() {
                                QueryLoader.imgCallback();
                        });
                        $(imgLoad).appendTo($(QueryLoader.preloader));
                }
        },

        spawnLoader: function() {
                if (QueryLoader.selectorPreload == "body") {
                        var height = $(window).height();
                        var width = $(window).width();
                        var position = "fixed";
                } else {
                        var height = $(QueryLoader.selectorPreload).outerHeight();
                        var width = $(QueryLoader.selectorPreload).outerWidth();
                        var position = "absolute";
                }
                var left = $(QueryLoader.selectorPreload).offset()['left'];
                var top = $(QueryLoader.selectorPreload).offset()['top'];
              
                QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
                $(QueryLoader.overlay).addClass("QOverlay");
                $(QueryLoader.overlay).css({
                        position: position,
                        top: top,
                        left: left,
                        width: width + "px",
                        height: height + "px"
                });
              
                QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
                $(QueryLoader.loadBar).addClass("QLoader");
              
                $(QueryLoader.loadBar).css({
                        position: "relative",
                        top: "50%",
                        width: "0%"
                });
        },
      
        animateLoader: function() {
                var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
                if (perc > 99) {
                        $(QueryLoader.loadBar).stop().animate({
                                width: perc + "%"
                        }, 50, "linear", function() {
                                QueryLoader.doneLoad();
                        });
                } else {
                        $(QueryLoader.loadBar).stop().animate({
                                width: perc + "%"
                        }, 50, "linear", function() { });
                }
        },
      
        doneLoad: function() {
                //prevent IE from calling the fix
                clearTimeout(QueryLoader.ieTimeout);
              
                //determine the height of the preloader for the effect
                if (QueryLoader.selectorPreload == "body") {
                        var height = $(window).height();
                } else {
                        var height = $(QueryLoader.selectorPreload).outerHeight();
                }
              
                //The end animation, adjust to your likings
                $(QueryLoader.loadBar).animate({
                        height: height + "px",
                        top: 0
                }, 50, "linear", function() {
                        $(QueryLoader.overlay).fadeOut(600);
                        $(QueryLoader.preloader).remove();
                });
        }
}

Bede wdzięczny za każda wskazówkę

Ten post edytował pantera366 17.08.2010, 16:26:03

[kamil4u]

Przeglądarka zapisuje wszelkie pliki do cache, czyli gdy odwiedzisz stronę ponownie(niezależnie czy z podstrony czy też nie) przeglądarka nie będzie wczytywała obrazków ponownie(oczywiście musisz mieć włączoną obsługę cache(raczej wszyscy mają) ). Sam skrypt jest bardzo nieekonomiczny - samo szukanie, znalezienie odpowiednich elementów trwa, a ten skrypt nie uwzględnia sprawy wydajności w należyty sposób(według mojej opinii). Najlepiej by było gdybyś znalazł coś prostszego.

Jeśli jednak nie znajdziesz nic innego, godnego uwagi, proponuję przy wejściu na stronę stworzyć ciasteczko i następnie wywoływać preload tylko gdy ciasteczko nie istnieje(związane to jest z cache-em).

[pantera366]

Przeglądarka zapisuje wszelkie pliki do cache, czyli gdy odwiedzisz stronę ponownie(niezależnie czy z podstrony czy też nie) przeglądarka nie będzie wczytywała obrazków ponownie(oczywiście musisz mieć włączoną obsługę cache(raczej wszyscy mają) ). Sam skrypt jest bardzo nieekonomiczny - samo szukanie, znalezienie odpowiednich elementów trwa, a ten skrypt nie uwzględnia sprawy wydajności w należyty sposób(według mojej opinii). Najlepiej by było gdybyś znalazł coś prostszego.

Jeśli jednak nie znajdziesz nic innego, godnego uwagi, proponuję przy wejściu na stronę stworzyć ciasteczko i następnie wywoływać preload tylko gdy ciasteczko nie istnieje(związane to jest z cache-em).

powiem tak ze bez tego skryptu strona wczytuje się w tym samym tempie a przynajmniej mam fajny efekt wejścia.Co do tych ciasteczek to muszę o tym poczytać bo na razie jestem zielony w temacie