Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 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
 
 Start new topic
Odpowiedzi
m72
post
Post #2





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

Posty w temacie
- m72   Problem z ładowaniem obrazków (odczyt szerokości kontenera)   1.08.2014, 15:54:17
- - trueblue   Czekasz aż obrazki się załadują, po skończeniu ład...   1.08.2014, 16:09:34
- - m72   Jak powyższe by się miało do mojego kodu bo po pro...   1.08.2014, 16:29:38
- - trueblue   Tak: var images=$('#fotokontener td img...   1.08.2014, 16:43:49
- - m72   Nie bardzo kumam jak to działa ale DZIAŁA ! ...   1.08.2014, 16:59:45

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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