Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ładowanie obrazków jak na WP
Forum PHP.pl > Forum > Po stronie przeglądarki
3miel
Witam,

zastanawia mnie sposób, w jaki został wykonany pasek łądowania przy pisaniu wiadomości w poczcie WP.

Nie wiem czy to dobry temat, ani w jakiej technice jest to wykonane.

Jeżeli ktoś nie wie jak to wygląda to powiem, że jest to ładowanie obrazka i w czasie rzeczywistym przekazywanie ile procent sie już załądowało.

Wiecie jak to zrobić?
Dex1987
Nie wiem jak to zrobili w wp ale przyklady takich paskow masz na tej stronie http://bedkowski.pl/js/
vieri_pl
  1. var _d=document,_E=_d.documentElement, _b=_d.body,_s='style',_di='display', _iH='innerHTML'
  2. _d.gTag=_d.getElementsByTagName;
  3. _d.gId=_d.getElementById;
  4. var _i=0;
  5. var _imgAll=0;
  6. var _imgLoaded=0;
  7. var _isRunningSlideshow = false;
  8.  
  9. function updateLoader(p,c,s){
  10. if( !( p=_d.gId('preloader') ) ) { setTimeout( updateLoader, 100 ); return; }
  11. _d.gId('preloaderOuter')[_s][_di]='block';
  12. c=p.getElementsByTagName('div')
  13. c[1][_iH]=c[0][_iH]='Loaded&nbsp;'+(_imgLoaded<10?_imgLoaded+'&nbsp;&nbsp;':_imgLoaded)+' images out of ' +_imgAll;
  14. c[1].style.clip='rect(0px '+c[1].offsetWidth+'px 40px '+Math.ceil(c[1].offsetWidth*(_imgLoaded/_imgAll))+'px)';
  15. }
  16. function preloader(){
  17. var t='',x=[];
  18. while( t=arguments[_imgAll] ) {
  19. x[_imgAll]=new Image()
  20. x[_imgAll].src=t;
  21. x[_imgAll].onload=imgOnload
  22. if( x[_imgAll].complete ) x[_imgAll].onload();
  23. _imgAll++;
  24. }
  25. }
  26. function imgOnload() {
  27. ++_imgLoaded;
  28. updateLoader();
  29. if( _imgLoaded >= _imgAll && self.finish ) finish();
  30. }
  31. function finish(p,c){
  32. if( !( p=_d.gId('preloader') ) ) { setTimeout( finish, 100 ); return; }
  33. c=p.getElementsByTagName('div')
  34. c[1][_iH]=c[0][_iH]='Loading images done';
  35. setTimeout( function(){
  36. _d.gId('preloaderOuter')[_s][_di]='none';
  37. _d.gId('contentContainer')[_s][_di]='block';
  38. }, 500 );
  39. }
  40.  
  41. function doColors(o,d,i,s,c){
  42. s=arguments.callee;
  43. c=['#858a78','#9d9560','#b6a048','#ceab30','#e7b618','#ffc000']
  44. d=(!(i|=i)||i>=c.length-1)?!d:d
  45. o[_s].color=c[i]
  46. if(!i&&o.stop) return o.stop=!1
  47. setTimeout( function(){s(o,d,i+=d&&1||-1)}, 150 )
  48. }
  49.  
  50. function leftMenuHideShow(o,l,h,b){
  51. l=_d.gId('left');h=_d.gId('headers').getElementsByTagName('div')
  52. b=(!l[_s][_di]||/^bloc/i.test(l[_s][_di]))?true:false
  53. h[0][_s][_di]=l[_s][_di]=b?'none':'block';
  54. h[1][_s].marginLeft=_d.gId('main')[_s].marginLeft=b?'0':'200px'
  55. o.parentNode[_s].marginLeft=b?'0':'-30px';
  56. o[_s].color=b?'#858a78':'#6b705f'
  57. o[_iH]=b?'show':'hide'
  58. }
  59.  
  60. function goNextPrev(e,n,p){
  61. if(!e) e = window.event;
  62. if(e.keyCode) e = e.keyCode;
  63. else if(e.which) e = e.which;
  64. switch( e ) {
  65. case 37:
  66. if(p)window.location.href=p
  67. break;
  68. case 32:
  69. if(_isRunningSlideshow)break;
  70. case 39:
  71. if(n)window.location.href=n
  72. break
  73. }
  74. }
  75.  
  76. function preloadNextPrevImgs(n,img){
  77. if( n ) {
  78. img = new Image()
  79. img.src=n
  80. }
  81. }
3miel
Dzięki za kod, tylko niestety nie jestm zbyt biegły w JS, wiec nie poradze sobie z zastosowaniem tego w uploaderze. Możesz dać jakiś przykład?
vieri_pl
Wstawiasz to do pliku np: preloader.js a tam gdzie ma byc zastosowany preloader wstawiasz kod <script type="text/javascript">
preloader( 'jakas_grafika_do_wczytania.jpg','2jakas_grafika_do_wczytania.jpg','3jakas_grafika_do_wczytania.jpg');
</script>

Bardzo proste biggrin.gif
3miel
No tak, ale czy to czasem nie jest do WCZYTYWANIA obrazkó i WYSWIETLANIA ich na stronie? Bo mi chodzi o przesłanie i zapisanie na serwerze! Możesz to wyjaśnić?
vieri_pl
Heh trzeba by było kompletnie przebudować skrypt, a możesz zapisać sobie strone wp i wtedy będziesz miał wszystkie skrypty java jakie uzyto na tej stronie bedziesz wtedy mogl zobaczyc jaki kod jest za to odpowiedzialny...
3miel
No zoabcze co się da zrobić:) dzieki narazie
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.