Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Niepłynna praca strony WWW
Forum PHP.pl > Forum > Po stronie przeglądarki
Puszy
27.03.2012, 10:42:31
Witam. Ponownie spotykam się z tym samym problemem, chodzi o brak płynności wyświetlania strony. Strona zawiera x wierszy formularza, około 10-12 inputów w wierszu. Przy 10-12 wierszach wszystko jest ok, ale przy wyższej liczbie wszystko zaczyna "haczyć". Po zaznaczeniu jednego z inputów wyraźnie można odczuć 1 sekundową przerwę w edycji, tak samo dzieje się z wpisywaniem textu. Dla porównania arkusz kalkulacyjny Google Docs wyświetla się normalnie. Jeżeli ktoś wie jak poradzić sobie z tym problemem z góry dziękuję za poświęcony czas.

usunięcie skryptów JS też nie pomaga i mogę zapewnić że nie jest to wina karty graficznej/procesora/słabego komputera

fragment kodu zawierający jeden wiersz inputów:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. ...
  4. </head>
  5. <body>
  6.  
  7. ...
  8.  
  9. <tr id="tr4" onmouseover="trover(4);" onmouseout="trout(4);">
  10. 	<td>
  11. 		<input id="cb4" name="check_4" type="checkbox" onchange="zaznacz(4);" />
  12. 	</td>
  13. 	<td>
  14. 		<img src="tel_off.png" />
  15. 	</td>
  16. 	<td class="action_name">
  17. 		<input name="action_name_4" type="text" size="70" value="APARAT OLYMPUS MJU TOUGH TG-320 CZERWONY" readonly />
  18. 	</td>
  19. 	<td class="our_name">
  20. 		<input name="our_name_4" type="text" size="70" value="APARAT OLYMPUS MJU TOUGH TG-320 CZERWONY" />
  21. 	</td>
  22. 	<td class="our_name">
  23. 		<img src="search.png" />
  24. 	</td>
  25. 	<td class="action_ean">
  26. 		<input name="action_ean_4" type="text" size="15" readonly value="4545350040093" />
  27. 	</td>
  28. 	<td class="our_ean">
  29. 		<input name="our_ean_4" type="text" size="15" value="4545350040093" />
  30. 	</td>
  31. 	<td class="our_ean">
  32. 		<img src="search.png" />
  33. 	</td>
  34. 	<td class="asin">
  35. 		<input name="asin_4" type="text" size="10" />
  36. 	</td>
  37. 	<td class="asin">
  38. 		<img src="search.png" onClick="search_asin('4');" />
  39. 	</td>
  40. 	<td class="stock">
  41. 		<input class="input_center" name="stock_4" type="text" size="4" value="2" readonly />
  42. 	</td>
  43. 	<td class="price_pln">
  44. 		<input class="input_right" name="price_pln_4" type="text" size="6" value="505.00" readonly />
  45. 	</td>
  46. 	<td class="price_eur">
  47. 		<input class="input_right" name="price_eur_4" type="text" size="6" value="121.95"  readonly/>
  48. 		</td>
  49. 	<td class="manager" style="display: none;">
  50. 		<input name="manager_4" type="text" size="25" value="" readonly />
  51. 	</td>
  52. 	<td class="small_pack" style="display: none">
  53. 		<input name="small_pack_4" class="input_center" type="text" value="" size="1" readonly />
  54. 	</td>
  55. 	<td class="serial">
  56. 		<input name="serial_4" type="text" value="SerialNumber" size="9" readonly />
  57. 	</td>
  58. 	<td class="producer">
  59. 		<select name="producer_4">
  60. 			<option value=""></option>
  61. 			<option value="19">Apple</option>
  62. 			<option value="17">Benq </option>
  63. 			<option value="12">Brother </option>
  64. 			<option value="3">Canon </option>
  65. 			<option value="13">Creative </option>
  66. 			<option value="14">Epson </option>
  67. 			<option value="20">Fuji</option>
  68. 			<option value="15">HP</option>
  69. 			<option value="11">Kingston </option>
  70. 			<option value="18">Kyocera </option>
  71. 			<option value="5">LG </option>
  72. 			<option value="2">Logitech </option>
  73. 			<option value="8">Nikon </option>
  74. 			<option value="10">Opticum </option>
  75. 			<option value="9">Panasonic </option>
  76. 			<option value="4">Philips </option>
  77. 			<option value="1">Samsung </option>
  78. 			<option value="16">Sandisk </option>
  79. 			<option value="7">Sony </option>
  80. 			<option value="6">Western Digital</option>
  81. 		</select>
  82. 	</td>
  83. 	<td class="warehouse">
  84. 		<select name="warehouse_4">
  85. 			<option value="1">Lager</option>
  86. 			<option value="2">FBA DE</option>
  87. 			<option value="3">Lager_Action</option>
  88. 			<option value="104">FBA_Retour</option>
  89. 			<option value="105">RMA</option>
  90. 		</select>
  91. 	</td>
  92. </tr>
  93.  
  94. <input type="hidden" name="action_external_id_4" value="FOTOLYAPA0304" />
  95.  
  96. ...
  97.  
  98. </body>
  99. </html>
[HTML] pobierz, plaintext
wNogachSpisz
5.05.2012, 11:50:52
Mi raz pomogło umieszczenie styli inline zamiast w klasach CSS :-]
Ilość HTML'a wzrostła kilkurotnie, w zamian powróciła płynność.
r4xz
5.05.2012, 21:26:49
o, tutaj! zobacz ten kod "..." - źródło zła!

...a teraz na serio. nie dałeś pełnego kodu i jak mamy ci pomóc? "..." - tam się może dosłownie wszystko kryć! a sam html nie będzie 'haczyć' wink.gif
wNogachSpisz
5.05.2012, 21:36:40
Cytat(r4xz @ 5.05.2012, 22:26:49 ) *
a sam html nie będzie 'haczyć' wink.gif

Oczywiście że będzie haczyć.
r4xz
5.05.2012, 22:29:09
Cytat(Puszy @ 27.03.2012, 11:42:31 ) *
Dla porównania arkusz kalkulacyjny Google Docs wyświetla się normalnie.

sprawdziłem... w google docs nie masz masy inputów smile.gif

Cytat(wNogachSpisz @ 5.05.2012, 22:36:40 ) *
Oczywiście że będzie haczyć.

wrzuciłem ten kod 15 razy i nie haczyło... może po prostu trafiłem jeszcze na miarę 'rozsądną' ilość

wypadałoby się raczej zastanowić czy aż tyle tego jest potrzebne? do czego to będzie wykorzystane? czy pola readonly nie lepiej zastąpić zwykłym div? etc. etc.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.