Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Problem z ładowaniem obrazków (odczyt szerokości kontenera)
m72
post
Post #1





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 25.12.2012

Ostrzeżenie: (0%)
-----

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 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. </head>
  7. <body>
  8. 	<div style="height:500px; background-color:#eee; overflow:auto;">
  9. 		<table id="fotokontener"><tr></tr></table>
  10. 	</div>
  11.  
  12. <script>
  13. $("#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>');
  14. $("#fotokontener tr").append('<td><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg"/></a></td>');
  15. console.log( $("#fotokontener").width() );
  16.  
  17. </script>
  18.  
  19.  
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Czekasz aż obrazki się załadują, po skończeniu ładowania mierzysz szerokość kontenera.
Temat: AJAXPHPpreloader dobrze
Go to the top of the page
+Quote Post
m72
post
Post #3





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 25.12.2012

Ostrzeżenie: (0%)
-----

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.

Ten post edytował m72 1.08.2014, 16:30:56
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Tak:
var images=$('#fotokontener td img');
reszta bez zmian.
Mierzenie kontenera w linii 8.
Proponuję Ci wywoływanie kodu JS wewnątrz funkcji ready().
Go to the top of the page
+Quote Post
m72
post
Post #5





Grupa: Zarejestrowani
Postów: 86
Pomógł: 0
Dołączył: 25.12.2012

Ostrzeżenie: (0%)
-----

Nie bardzo kumam jak to działa ale DZIAŁA ! (IMG:style_emoticons/default/smile.gif) 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 (IMG:style_emoticons/default/smile.gif) 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6. </head>
  7. <body>
  8. 	<div style="height:500px; background-color:#eee; overflow:auto;">
  9. 		<table id="fotokontener"><tr></tr></table>
  10. 	</div>
  11.  
  12. <script>
  13.  
  14.  
  15. $("#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>');
  16. $("#fotokontener tr").append('<td><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-3.jpg"/></a></td>');
  17. console.log( $("#fotokontener").width() );
  18.  
  19.     var images=$('#fotokontener td img');
  20.     var count=0;
  21.     for(var i=0;i<images.length;i++){
  22. 		var img=document.createElement('img');
  23. 		img.onload=function(){
  24. 			count++;
  25. 			if(count==images.length){
  26. 			console.log( $("#fotokontener").width() );
  27. 			}
  28. 		}
  29.     img.src=$(images[i]).attr('src');
  30.     }
  31. </script>
  32.  
  33. </body>
  34. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 04:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn