[JavaScript]Preloader Opcje

[kamilo818]

Witajcie.

Napisałem preloader obrazków na stronie:

[PHP] pobierz, plaintext 
var images=$('img');
console.log(images);
var count=0;
var step = 100/images.length;
$('body').append('<div class="loader2"><img src="http://page4u.waw.pl/shop/712.gif"/><div class="loader_box"> </div></div>');
images
    .load(function() { 
						count++;
						console.log(count);
						$('.loader_box').html(Math.round(count*step)+"%<br>");
						if(count==images.length){
						$('.loader2').fadeOut();
						}
					})
    .error(function() { console.log("error loading image"); })
    .attr("src", $(this).attr("src"))
;
 
 
$('div.wiecej').click(function(){	
		var limit = parseInt($(this).attr('limit'))+20;
		window.location.hash =limit;
});
[PHP] pobierz, plaintext 

Problem polega na tym że często się ten kot wykonuje tylko do 25% lub 49%. Mimo ze zmienna images zawiera wszystkie obrazki ze strony i na samej stronie widac ze wszystkie się wczytały.
Jak zaczne odswiezac stronę to w koncu przejdzie do 100%. Co tu jest nie tak?

[markuz]

kot

A spróbuj images.each(function() { $(this).load(); })
Zobacz też cache - http://forum.php.pl/index.php?showtopic=234172

[kamilo818]

hehe kot

[PHP] pobierz, plaintext 
images.each(function() { 
	$(this).load(function() { 
						count++;
						console.log(count);
						$('.loader_box').html(Math.round(count*step)+"%<br>");
						if(count==images.length){
						$('.loader2').fadeOut();
						}
					})
    .error(function() { console.log("error loading image"); })
 
;
})
[PHP] pobierz, plaintext 

Działa tak samo:/

I nie mam pojecia o co chodzi z cache. Jak to sprawdzic?

[markuz]

Żeby to Ci działało jak trzeba musisz wczytywać kolejny obrazek dopiero jak się wczyta poprzedni. Wejdź w konsolę i sprawdź zakładkę Sieć - zobaczysz, że wszystkie obrazki się wczytują na raz - przez co niektóre mogą się nie wczytać.

[kamilo818]

Możesz podpowiedzieć jak to zrobić?
Np w pętli?
Jak mam w tablicy images obrazki ze strony i po kolei je np w petli for wczytywać?
Tylko jka zrobić żeby kolejny się zaczął wczytywać jak poprzedni się wczyta?

[kamilo818]

Coś takiego mam ale nie za bardzo działa.

[PHP] pobierz, plaintext 
var images=$('img');
var count=0;
var step = 100/images.length;
$('body').append('<div class="loader2"><img src="http://page4u.waw.pl/shop/712.gif"/><div class="loader_box"> </div></div>');
for(var i=0;i<images.length;i++){
var load = function(i) {
	if(i > images.length) return false;
	load.success(function() {
		count++;
		console.log(count);
		$('.loader_box').html(Math.round(count*step)+"%<br>");
		if(count==images.length){
			$('.loader2').fadeOut();
		}
	}); 
}
}
[PHP] pobierz, plaintext 

Ten post edytował kamilo818 29.10.2014, 16:50:07

[trueblue]

A najlepsze jest to, że: http://forum.php.pl/index.php?showtopic=233435

Ten post edytował trueblue 29.10.2014, 16:40:57

[kamilo818]

Zgadza się ale ten kod nie działa mi w ogóle dlatego piszę nowy temat

[trueblue]

Kod

$('body').append('<div class="loader2"><img src="http://page4u.waw.pl/shop/712.gif"/><div class="loader_box"> </div></div>');

var images=$('img');
var step = 100/images.length;
var count=0;
for(var i=0;i<images.length;i++){
    var img=document.createElement('img');
    img.onload=function(){
        count++;
        $('.loader_box').html(Math.round(count*step)+"%<br>")
        if(count==images.length){
            $('.loader2').fadeOut();
        }
    }
    img.src=$(images[i]).attr('src');
}