+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Modyfikacja skryptu preload -jquery (/thread-modyfikacja-skryptu-preload-jquery)
Modyfikacja skryptu preload -jquery - pantera366 - 17-08-2010
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();
});
}
}.POZDRAWIAM
RE: Modyfikacja skryptu preload -jquery - Kartofelek - 18-08-2010
Masz przecież jak wół w implementacji tego (do ktorej masz link na samym poczatku skryptu)
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.
RE: Modyfikacja skryptu preload -jquery - pantera366 - 18-08-2010
(18-08-2010, 16:25)Kartofelek napisał(a): Masz przecież jak wół w implementacji tego (do ktorej masz link na samym poczatku skryptu)
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.
RE: Modyfikacja skryptu preload -jquery - Kartofelek - 18-08-2010
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.
RE: Modyfikacja skryptu preload -jquery - pantera366 - 18-08-2010
(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
RE: Modyfikacja skryptu preload -jquery - Kartofelek - 18-08-2010
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.
RE: Modyfikacja skryptu preload -jquery - pantera366 - 18-08-2010
(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ł
,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 sypie czy da sie to zrobić za pomocą jakiegoś wpisu do tego skryptu czy trzeba koniecznie php,pzdr
RE: Modyfikacja skryptu preload -jquery - Kartofelek - 19-08-2010
Oczywiscie ze sie da:
http://api.jquery.com/jQuery.browser/