Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Modyfikacja skryptu preload -jquery
#1
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 narazie działa on także przy przechodzeniu z podstron na strone głowna np z działu kontakt do home. Oto kod skryptu,skrypt nie jest mojego autorstwa wprowadzilem 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 wdzieczny za kazda wskazówkę

.POZDRAWIAM
Odpowiedz
#2
Masz przecież jak wół w implementacji tego (do ktorej masz link na samym poczatku skryptu) Wink
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Cytuje:
"If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want."

1 <script type='text/javascript'>
2 QueryLoader.selectorPreload = "#idOfTheElement";
3 QueryLoader.init();
4 </script>

Czyli dla danej strony (np dla body) dajesz id i to preloadujesz. Czyli body w twoim index powinien miec jakis id.
Odpowiedz
#3
(18-08-2010, 16:25)Kartofelek napisał(a): Masz przecież jak wół w implementacji tego (do ktorej masz link na samym poczatku skryptu) Wink
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

Cytuje:
"If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want."

1 <script type='text/javascript'>
2 QueryLoader.selectorPreload = "#idOfTheElement";
3 QueryLoader.init();
4 </script>

Czyli dla danej strony (np dla body) dajesz id i to preloadujesz. Czyli body w twoim index powinien miec jakis id.

Ja wiem ze takie coś istnieje ale chyba nie w tym rzecz.Gdyż to nadaje ten efekt konkretnemu elementowi id a mi chodzi o to zeby ten efekt był tylko przy wchodzeniu na stronę główną bezposrednio z przegladarki a teraz jest tak ze np. przechodząc z działu kontakt do Portfolio(strona główna) efekt ten występuje i tutaj jest wlasnie problem,natomiast wchodząc bezpośrednio w podstronę kontakt efektu tego nie ma.Sprawdziłem to z przypisywaniem id do body i dalej ma ten sam problem.
Odpowiedz
#4
A to już wina braku kombinowania ;]
Przecież w php możesz taki id nadawać. Możesz też php ten skrypt wrzucać w stronę.
Możesz ustawiać ciacho, sesję itp - tylko czy warto?
Efekt jest niestety mocno ograniczony i dużego pola na działanie nie masz.
Odpowiedz
#5
(18-08-2010, 21:03)Kartofelek napisał(a): A to już wina braku kombinowania ;]
Przecież w php możesz taki id nadawać. Możesz też php ten skrypt wrzucać w stronę.
Możesz ustawiać ciacho, sesję itp - tylko czy warto?
Efekt jest niestety mocno ograniczony i dużego pola na działanie nie masz.

gdybym tylko znał na tyle php...Niestety dla mnie to jest magia na teraz,głownie zajmuje się grafiką,myślałem ze wystarczy drobna modyfikacja tego skryptu,trudno,dzieki za pomoc,pzdr
Odpowiedz
#6
Ogólnie bez ciacha czy sesji nie przejdzie. Chyba że zrobił byś to wszystko w ajaxie, a strony ładował do jakiegoś diva.
Ogólnie - gra nie warta świeczki.
Osobiscie bym zrezygnował z tego efektu. Ludzie nie lubią jak ich się zmusza do wczesnego ladowania grafiki.
Odpowiedz
#7
(18-08-2010, 23:03)Kartofelek napisał(a): Ogólnie bez ciacha czy sesji nie przejdzie. Chyba że zrobił byś to wszystko w ajaxie, a strony ładował do jakiegoś diva.
Ogólnie - gra nie warta świeczki.
Osobiscie bym zrezygnował z tego efektu. Ludzie nie lubią jak ich się zmusza do wczesnego ladowania grafiki.

Ok dzięki za rady ,mam takie jeszcze jedno pytanie i nie będę cie dalej męczyłShy,czy da się zrobić tak aby ten skrypt wyświetlał się tylko na danej przeglądarce? to znaczy chciałbym zablokować działanie tego skryptu na operze bo lekko sie tam sypieWink czy da sie to zrobić za pomocą jakiegoś wpisu do tego skryptu czy trzeba koniecznie php,pzdr
Odpowiedz
#8
Oczywiscie ze sie da:
http://api.jquery.com/jQuery.browser/
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
Sad HTML/CSS/JQUERY - Potrzebuje pomocy / Bezradność jokerblitzz 10 10,230 28-04-2016, 00:24
Ostatni post: mubi
  jquery? mordrag 0 2,337 29-03-2015, 17:44
Ostatni post: mordrag
  aby funkcja JQuery zadzialala po okreslonym czasie Arnimarl 2 3,825 25-05-2014, 07:38
Ostatni post: Arnimarl
  Konflikt Mootools/Jquery kurde 2 3,248 31-10-2013, 01:44
Ostatni post: kornell
  Slider z jQuery lomek 2 3,765 19-10-2013, 04:40
Ostatni post: lomek

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl