Forum PHP.pl > Problem z ładowaniem obrazków (odczyt szerokości kontenera)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Problem z ładowaniem obrazków (odczyt szerokości kontenera)

Forum PHP.pl > Forum > Po stronie przeglądarki

m72

1.08.2014, 15:54:17

Witam, problem jest dość szeroko poruszany w internecie ale ciężko znaleźć prostą odpowiedź.
W sktócie, chce zrobić sktypt który:
1. Załaduje na stronę obrazki poprzez jquery append
2. Poczeka aż one się załadują
3. Odczyta szekokość całego kontenera do którego się załadowały.

Obrazki ładuję do tabeli bo tego wymaga dalsza (tu nie zamieszczona) część skryptu, ale to nieistotne.
Wiem, że jest wiele pluginów do ładowania obrazków.
Czy ktoś mógłby powiedzieć jak zmodyfikować ten skrypt tak żeby działał jak w założeniach ?

Teraz problem polega na tym że skryp przelatuje szybciej niż obrazki (specjalnie duże) się załadują i odczytana w konsoli szerokość jest zero.
po odświeżeniu strony jest już wszystko ok. Żeby sprawdzić błąd ponownie trzeba wyczyścić pamięć podręczną przegądarki i ją zresetować.

Oto kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div style="height:500px; background-color:#eee; overflow:auto;">
		<table id="fotokontener"><tr></tr></table>
	</div>
 
<script>
$("#fotokontener tr").append('<td><img src="http://www.hdwallpapersfullhd.net/wp-content/uploads/2014/05/Golden-Gate-Bridge-HD-Wallpapers-Golden-Gate-Bridge-Wallpaper.jpg"/></a></td>');
$("#fotokontener tr").append('<td><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg"/></a></td>');
console.log( $("#fotokontener").width() );
 
</script>
 
 
 
</body>
</html>
[HTML] pobierz, plaintext

trueblue

1.08.2014, 16:09:34

Czekasz aż obrazki się załadują, po skończeniu ładowania mierzysz szerokość kontenera.
Temat: AJAXPHPpreloader dobrze

m72

1.08.2014, 16:29:38

Jak powyższe by się miało do mojego kodu bo po prostu nie kumam tamtego tematu.
Próbowałem z funkcją .load() z jquery ale ona poprostu nie działa dla obrazków.

trueblue

1.08.2014, 16:43:49

Tak:
var images=$('#fotokontener td img');
reszta bez zmian.
Mierzenie kontenera w linii 8.
Proponuję Ci wywoływanie kodu JS wewnątrz funkcji ready().

m72

1.08.2014, 16:59:45

Nie bardzo kumam jak to działa ale DZIAŁA !

dzięki.
Zamieszczam cały działający kod gdzi w 2 miejscach jest odczytywanie szerokości kontenera i widać ze dopiero po załadowaniu zdjęć jest ok.
Kod się pewnie komuś przyda bo to bardzo często poruszany temat na forach ale nigdzie nie ma tak prostego rozwiązania

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
	<div style="height:500px; background-color:#eee; overflow:auto;">
		<table id="fotokontener"><tr></tr></table>
	</div>
 
<script>
 
 
$("#fotokontener tr").append('<td><img src="http://www.hdwallpapersfullhd.net/wp-content/uploads/2014/05/Golden-Gate-Bridge-HD-Wallpapers-Golden-Gate-Bridge-Wallpaper.jpg"/></a></td>');
$("#fotokontener tr").append('<td><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg"/></a></td>');
console.log( $("#fotokontener").width() );
 
    var images=$('#fotokontener td img');
    var count=0;
    for(var i=0;i<images.length;i++){
		var img=document.createElement('img');
		img.onload=function(){
			count++;
			if(count==images.length){
			console.log( $("#fotokontener").width() );
			}
		}
    img.src=$(images[i]).attr('src');
    }
</script>
 
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.