Ładowanie obrazków jak na WP Opcje

[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]

[HTML] pobierz, plaintext 
var _d=document,_E=_d.documentElement, _b=_d.body,_s='style',_di='display', _iH='innerHTML'
_d.gTag=_d.getElementsByTagName;
_d.gId=_d.getElementById;
var _i=0;
var _imgAll=0;
var _imgLoaded=0;
var _isRunningSlideshow = false;
 
function updateLoader(p,c,s){
	if( !( p=_d.gId('preloader') ) ) { setTimeout( updateLoader, 100 ); return; }
	_d.gId('preloaderOuter')[_s][_di]='block';
	c=p.getElementsByTagName('div')
	c[1][_iH]=c[0][_iH]='Loaded&nbsp;'+(_imgLoaded<10?_imgLoaded+'&nbsp;&nbsp;':_imgLoaded)+' images out of ' +_imgAll;
	c[1].style.clip='rect(0px '+c[1].offsetWidth+'px 40px '+Math.ceil(c[1].offsetWidth*(_imgLoaded/_imgAll))+'px)';
}
function preloader(){
	var t='',x=[];
	while( t=arguments[_imgAll] ) {
		x[_imgAll]=new Image()
		x[_imgAll].src=t;
		x[_imgAll].onload=imgOnload
		if( x[_imgAll].complete ) x[_imgAll].onload();
		_imgAll++;
	}
}
function imgOnload() {
	++_imgLoaded;
	updateLoader();
	if( _imgLoaded >= _imgAll && self.finish ) finish();
}
function finish(p,c){
	if( !( p=_d.gId('preloader') ) ) { setTimeout( finish, 100 ); return; }
	c=p.getElementsByTagName('div')
	c[1][_iH]=c[0][_iH]='Loading images done';
	setTimeout( function(){
		_d.gId('preloaderOuter')[_s][_di]='none';
		_d.gId('contentContainer')[_s][_di]='block';
	}, 500 );
}
 
function doColors(o,d,i,s,c){
	s=arguments.callee;
	c=['#858a78','#9d9560','#b6a048','#ceab30','#e7b618','#ffc000']
	d=(!(i|=i)||i>=c.length-1)?!d:d
	o[_s].color=c[i]
	if(!i&&o.stop) return o.stop=!1
	setTimeout( function(){s(o,d,i+=d&&1||-1)}, 150 )
}
 
function leftMenuHideShow(o,l,h,b){
	l=_d.gId('left');h=_d.gId('headers').getElementsByTagName('div')
	b=(!l[_s][_di]||/^bloc/i.test(l[_s][_di]))?true:false
	h[0][_s][_di]=l[_s][_di]=b?'none':'block';
	h[1][_s].marginLeft=_d.gId('main')[_s].marginLeft=b?'0':'200px'
	o.parentNode[_s].marginLeft=b?'0':'-30px';
	o[_s].color=b?'#858a78':'#6b705f'
	o[_iH]=b?'show':'hide'
}
 
function goNextPrev(e,n,p){
	if(!e) e = window.event;
	if(e.keyCode) e = e.keyCode;
	else if(e.which) e = e.which;
	switch( e ) {
		case 37:
			if(p)window.location.href=p
			break;
		case 32:
			if(_isRunningSlideshow)break;
		case 39:
			if(n)window.location.href=n
			break
	}
}
 
function preloadNextPrevImgs(n,img){
	if( n ) {
		img = new Image()
		img.src=n
	}
}
[HTML] pobierz, plaintext 

[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

[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