three.js 源碼分析之ImageLoader

/**

     * @author mrdoob / http://mrdoob.com/

     */

    這個類用於圖像的下載,包括數據存儲在url中的下載過程,需要注意的是跨域問題

    //圖片下載器

    function ImageLoader( manager ) {

 

        this.manager = ( manager !== undefined ) ? manager : DefaultLoadingManager;

 

    }

 

    Object.assign( ImageLoader.prototype, {

        //跨域

        crossOrigin: 'anonymous',

        //加載圖片

        load: function ( url, onLoad, onProgress, onError ) {

 

            if ( url === undefined ) url = '';

 

            if ( this.path !== undefined ) url = this.path + url;

 

            //處理url訪問

            url = this.manager.resolveURL( url );

 

            var scope = this;

            //首先從緩存中獲取

            var cached = Cache.get( url );

            //緩存中存在

            if ( cached !== undefined ) {

                //開始回調

                scope.manager.itemStart( url );

 

                setTimeout( function () {

                    //空閒處理

                    if ( onLoad ) onLoad( cached );

                    //結束回調

                    scope.manager.itemEnd( url );

 

                }, 0 );

                //返回方式獲取

                return cached;

 

            }

 

            //創建圖片div

            var image = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'img' );

 

            function onImageLoad() {

                //下載完成移出監聽

                image.removeEventListener( 'load', onImageLoad, false );

                image.removeEventListener( 'error', onImageError, false );

                //將img添加到緩存(這個this是img自己)

                Cache.add( url, this );

                //回調

                if ( onLoad ) onLoad( this );

                //結束回調

                scope.manager.itemEnd( url );

 

            }

 

            function onImageError( event ) {

                //處理錯誤

                image.removeEventListener( 'load', onImageLoad, false );

                image.removeEventListener( 'error', onImageError, false );

 

                if ( onError ) onError( event );

 

                scope.manager.itemError( url );

                scope.manager.itemEnd( url );

 

            }

 

            //設置下載監聽和錯誤監聽

            image.addEventListener( 'load', onImageLoad, false );

            image.addEventListener( 'error', onImageError, false );

 

            //如果url中有沒有圖片數據

            if ( url.substr( 0, 5 ) !== 'data:' ) {

                //設置圖片可以跨域訪問

                if ( this.crossOrigin !== undefined ) image.crossOrigin = this.crossOrigin;

 

            }

            //開始下載計數和回調

            scope.manager.itemStart( url );

            //開始下載

            image.src = url;

            //返回圖片

            return image;

 

        },

        //設置跨域

        setCrossOrigin: function ( value ) {

 

            this.crossOrigin = value;

            return this;

 

        },

        //設置路徑

        setPath: function ( value ) {

 

            this.path = value;

            return this;

 

        }

 

    } );

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章