+//{+netimage"画像の読み込み監視"(Imageの読み込みを監視し画像表示のコントロールを行う)[+net,+utilimage]\r
/* \r
* original\r
* LICENSE: MIT?\r
* AUTHOR: uupaa.js@gmail.com\r
* \r
*/\r
-\r
-var X_Net_Image_hasImage = !!window[ 'Image' ],\r
- X_Net_Image_image = X_Net_Image_hasImage && new Image(),\r
+var X_ImgLoader_image = window[ 'Image' ] && new Image(),\r
// IE では厳密には HTMLImageElement ではなく、appendChild してもサイズが取れず、removeChild に失敗する\r
- X_Net_Image_isElement = !( X_UA[ 'IE' ] < 9 ) && X_Type_isHTMLElement( X_Net_Image_image );\r
- \r
-\r
-if( !X_Net_Image_hasImage ){\r
- alert( 'no Image!' );\r
-} else\r
-if( X_Net_Image_isElement ){\r
- //alert( 'X_Net_Image_isElement ' + X_Net_Image_isElement );\r
-};\r
+ X_ImgLoader_isElement = !( X_UA[ 'IE' ] < 9 ) && X_Type_isHTMLElement( X_ImgLoader_image ),\r
+ // http://uupaa.hatenablog.com/entry/2013/12/17/171809\r
+ // お手軽に画像の読み込みをハンドリングする、今どきな方法\r
+ X_ImgLoader_0forError = !X_UA[ 'IE' ] || X_UA[ 'IE' ] === 11;\r
\r
/*\r
* TODO\r
* new Image() のときに Image オブジェクトを作るもの(IE8-)と、HTMLImageElement を作るものがある。\r
* Image は、X.EventDispatcher で、<img> は X.Node で。 \r
- * \r
- * Opera7 では毎回 image を作る必要あり、src が異なればOK?\r
*/\r
\r
-X_TEMP.X_NET_Image_init = function(){\r
-\r
-delete X_TEMP.X_NET_Image_init;\r
-\r
-X_NET_ImageWrapper = X_Class_override(\r
- !X_Net_Image_isElement ? X_EventDispatcher( X_Net_Image_image ) : Node( X_Net_Image_image ),\r
- {\r
+X_TEMP.X_ImgLoader_init = function(){\r
+ X_ImgLoader = X_Class_override(\r
+ X_ImgLoader_isElement ? Node( X_ImgLoader_image ) : X_EventDispatcher( X_ImgLoader_image ),\r
+ X_TEMP.X_ImgLoader_params\r
+ );\r
+ \r
+ X_ImgLoader[ 'listen' ]( [ 'load', 'error' /*, 'abort'*/ ], X_ImgLoader_handleEvent );\r
+ \r
+ delete X_TEMP.X_ImgLoader_init;\r
+ delete X_TEMP.X_ImgLoader_params;\r
+ \r
+ return X_ImgLoader;\r
+};\r
\r
- _busy : false,\r
+X_TEMP.X_ImgLoader_params = {\r
tick : 0,\r
timerID : 0,\r
finish : false,\r
timeout : 0,\r
\r
load : function( data ){\r
- this._busy = true;\r
this.abspath = X_URL_toAbsolutePath( data[ 'url' ] );\r
this.delay = data[ 'delay' ] || 100;\r
this.timeout = data[ 'timeout' ] || 5000;\r
if( X_UA[ 'Opera7' ] && this[ '_rawObject' ].complete ){\r
this[ 'asyncDispatch' ]( 'load' );\r
} else {\r
- this.timerID = X_Timer_add( this.delay, 0, this, X_NET_Image_detect );\r
+ this.timerID = X_Timer_add( this.delay, 0, this, X_ImgLoader_detect );\r
};\r
},\r
\r
cancel : function(){\r
+ var raw = this[ '_rawObject' ];\r
// abort がある?\r
- this[ '_rawObject' ] && this[ '_rawObject' ].abort && this[ '_rawObject' ].abort();\r
+ raw && raw.abort && raw.abort();\r
// this[ '_rawObject' ].src = '';\r
- this._busy = false;\r
this.finish = true;\r
},\r
\r
reset : function(){\r
+ console.log( 'X.Net.Image:reset ' + this.abspath + ' timerID:' + this.timerID );\r
+ \r
this.timerID && X_Timer_remove( this.timerID );\r
- //X_Net_Image_isElement ? this[ '_rawObject' ].removeAttribute( 'src' ) : ( this[ '_rawObject' ].src = '' );\r
+ this.timerID = 0;\r
+ \r
+ //X_ImgLoader_isElement ? this[ '_rawObject' ].removeAttribute( 'src' ) : ( this[ '_rawObject' ].src = '' );\r
this[ '_rawObject' ].src = '';\r
- this.timerID = 0;\r
- this._busy = false;\r
- this.finished = false;\r
- this.abspath = '';\r
+ this.finish = false;\r
+ this.abspath = '';\r
}\r
- }\r
-);\r
-\r
-X_NET_ImageWrapper[ 'listen' ]( [ 'load', 'error' /*, 'abort'*/, X_EVENT_KILL_INSTANCE ], X_NET_Image_handleEvent );\r
-\r
-return X_NET_ImageWrapper;\r
-\r
-};\r
+ };\r
\r
-function X_NET_Image_detect(){\r
+function X_ImgLoader_detect(){\r
+ var raw = this[ '_rawObject' ];\r
+ \r
if( this.finish ) return;\r
- if( this[ '_rawObject' ] && this[ '_rawObject' ].complete ){\r
- this._busy = false;\r
+ \r
+ if( raw && raw.complete ){\r
this.finish = true;\r
- if( this[ '_rawObject' ].width ) return;\r
+ console.log( 'X.Net.Image:detect ' + raw.width );\r
+ if( raw.width ) return;\r
X_Timer_remove( this.timerID );\r
this.timerID = this[ 'asyncDispatch' ]( X_EVENT_ERROR );\r
} else\r
if( this.timeout < ( this.tick += this.delay ) ){\r
- this._busy = false;\r
this.finish = true;\r
X_Timer_remove( this.timerID );\r
- this.timerID = this[ 'asyncDispatch' ]( X_EVENT_TIMEOUT );\r
+ this.timerID = this[ 'asyncDispatch' ]( { type : X_EVENT_ERROR, 'timeout' : true } );\r
};\r
};\r
\r
-function X_NET_Image_handleEvent( e ){\r
- var size;\r
+function X_ImgLoader_handleEvent( e ){\r
+ var raw = this[ '_rawObject' ], size;\r
+ \r
+ // IE11 reset() 時にここに入ってくる...\r
+ if( !this.abspath ) return;\r
+ console.log( 'X.Net.Image:handleEvent ' + e.type );\r
\r
switch( e.type ){\r
case 'error' :\r
//case 'abort' : // TODO ??\r
+ // ie11(10,9 開発モード)で mineType 不正の場合、画像取得に成功してもエラーイベントが起こるのを無視する。\r
+ if( X_ImgLoader_0forError && raw.width ) return;\r
if( this.finish ) return;\r
- this._busy = false;\r
this.finish = true;\r
this.timerID && X_Timer_remove( this.timerID );\r
this.timerID = this[ 'asyncDispatch' ]( /*e.type === 'error' ?*/ X_EVENT_ERROR /*: X_EVENT_CANCELED*/ );\r
case 'load' :\r
// if( finish === true ) return; // これがあると firefox3.6 で駄目、、、\r
// if( timer ) return; // これがあると safari3.2 で駄目、、、\r
- this._busy = false;\r
this.finish = true;\r
this.timerID && X_Timer_remove( this.timerID );\r
- if( X_UA[ 'Opera' ] && !this[ '_rawObject' ].complete ){\r
+ if( X_UA[ 'Opera' ] && !raw.complete ){\r
this.timerID = this[ 'asyncDispatch' ]( X_EVENT_ERROR );\r
return;\r
};\r
\r
- size = X_Util_Image_getActualDimension( !X_Net_Image_isElement ? this.abspath : this );\r
+ size = X_Util_Image_getActualDimension( !X_ImgLoader_isElement ? this.abspath : this );\r
this.timerID = this[ 'asyncDispatch' ]( {\r
'type' : X_EVENT_SUCCESS,\r
'src' : this.abspath,\r
// time , this[ '_rawObject' ].fileSize\r
} );\r
break;\r
-\r
- case X_EVENT_KILL_INSTANCE :\r
- this.reset();\r
- !X_Net_Image_hasImage && this[ 'kill' ](); // if xnode\r
- break;\r
};\r
};\r
\r
\r
-// X_Net_Image_isElement && X_NET_ImageWrapper[ 'appendAt' ]( X.X_Node_systemNode );\r
+// X_ImgLoader_isElement && X_ImgLoader[ 'appendAt' ]( X_Node_systemNode );\r