이미지 프리 로더 자바 스크립트가 지원 이벤트

해결법

1.여기에 마지막이 완료되면 콜백을 배열에서 이미지를 미리로드하고 호출하는 함수는 다음과 같습니다

여기에 마지막이 완료되면 콜백을 배열에서 이미지를 미리로드하고 호출하는 함수는 다음과 같습니다

function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.onload = function() {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];

preloadImages(imageSrcs, images, myFunction);

우리는 비동기 작업에 대한 약속을 사용하는 시대에 지금 것 때문에 그리고, 여기에 ES6 표준 약속을 통해 그 용도의 약속과 통지 발신자를 위의 버전입니다 :

function preloadImages(srcs) {
    function loadImage(src) {
        return new Promise(function(resolve, reject) {
            var img = new Image();
            img.onload = function() {
                resolve(img);
            };
            img.onerror = img.onabort = function() {
                reject(src);
            };
            img.src = src;
        });
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return Promise.all(promises);
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});

그리고, 여기에 2015의 jQuery 약속을 사용하여 버전입니다 :

function preloadImages(srcs) {
    function loadImage(src) {
        return new $.Deferred(function(def) {
            var img = new Image();
            img.onload = function() {
                def.resolve(img);
            };
            img.onerror = img.onabort = function() {
                def.reject(src);
            };
            img.src = src;
        }).promise();
    }
    var promises = [];
    for (var i = 0; i < srcs.length; i++) {
        promises.push(loadImage(srcs[i]));
    }
    return $.when.apply($, promises).then(function() {
        // return results as a simple array rather than as separate arguments
        return Array.prototype.slice.call(arguments);
    });
}

preloadImages(["src1", "src2", "src3", "src4"]).then(function(imgs) {
    // all images are loaded now and in the array imgs
}, function(errImg) {
    // at least one image failed to load
});

2.보다 강력한 솔루션의 경우, 콜백의 커플 (jsFiddle)이 프리 로더 기능을 고려한다.

보다 강력한 솔루션의 경우, 콜백의 커플 (jsFiddle)이 프리 로더 기능을 고려한다.

이 예제에서는 다음 프리 로더 내부의 콜백을 무시하고 객체 리터럴 PRELOADER_OBJECT 내부 콜백 및 이미지 해시를 통과하고 있습니다 :

// preloder object stores image hash
// and event handler callbacks
var PRELOADER_OBJECT = {

    imgArray:"http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg http://torwars.com/wp-content/uploads/2012/02/chewbacca-w-han-solo-anh.jpg".split(" "),

    progressCallback : function( percent )
    {
        $( '#preloader_progress' ).html( 'preload progress complete : ' + percent + '%' );
        console.log( 'preload progress complete : ', percent );
    },

    completeCallback : function( scope )
    {
        // hide preload indicator, do something when finished
        console.log( 'preload complete!' );
        $( '#preloader_modal' ).delay( 1000 ).animate( { opacity : 0 }, function( )
        {
            $( '.preload_class' ).each( function( index )
            {
                $( this ).delay( index * 100 ).animate( { opacity : 0 } );
            } );
        } );
    }

/*Localize params and create PRELOADER object. 
Needs to loadImages( ); iterate through hash and 
call onPreloadProgress( ) and onPreloadComplete( )
each time until finished. If you're still within
bounds of the image hash, call progressCallback( )
recursively. When finished, fire onCompleteCallback( )*/

var PRELOADER = function( object )
{
    // preloader modal overlay
    this.modal = undefined;

    // progress indicator container
    this.progressIndicator = undefined;

    // image preload progress
    this.progress = undefined;

    // progress callback
    this.progressCallback = undefined;

    // complete callback
    this.completeCallback = undefined;

    // hash to store key : value pairs for image paths
    this.imgArray = undefined; 

    // store images in preloadArray
    this.preloadArray = [];

    // initialize and localize our data
    this.initialize = function( )
    {
        // create preload indicator and overlay modal
        this.createPreloaderModal( );

        // image hash
        this.imgArray = object.imgArray;

        // progress callback event handler
        this.progressCallback = object.progressCallback;

        // complete callback event
        this.completeCallback = object.completeCallback;

        // load images
        this.loadImages( );
    };

    this.progressCallback = function( ) {}; // function to override

    this.completeCallback = function( ) {}; // function to override

    // load images into DOM and fire callbacks
    this.loadImages = function( )
    {
        var that = this;

        // iterate through hash and place images into DOM
        $.each( PRELOADER_OBJECT.imgArray, function( index, object )
        {
            this.image = $( "<img/>", { "src" : object, "class": "preload_class" } ).appendTo( 'body' );

            // mark progress and call progressCallback( ) event handler
            that.progress = Math.ceil( ( index / PRELOADER_OBJECT.imgArray.length ) * 100 );
            that.progressCallback( this.progress );

            that.preloadArray.push( this.image );
        } );

        // check for array bounds and call completeCallback( )
        if ( PRELOADER_OBJECT.imgArray.length )
        {
            this.progressCallback( 100 );
            this.completeCallback( this );
        }
    };

    // create modal to display preload data
    this.createPreloaderModal = function( )
    {
        this.modal = $( '<div/>', { 'id' : 'preloader_modal' } ).appendTo( 'body' );
        this.progressIndicator = $( '<h1/>', { 'id' : 'preloader_progress' } ).appendTo( this.modal );
    };
};

// trigger event chain when DOM loads
$( document ).ready( function( )
{    
    // instantiate PRELOADER instance and pass
    // our JSON data model as a parameter
    var preloader = new PRELOADER( PRELOADER_OBJECT );

    // initialize preloader
    preloader.initialize( );
} );

};

이미지 프리 로더를 요구하는 사이트 부하 충분한으로, 모달 텍스트 표시는 쉽게 데이터 중심의 jQuery 애니메이션을 지원하도록 수정 될 수 있습니다.

3.미리로드 및로드 같은 일이다. 당신은 이미지를 삽입 (중 새로 만들거나 기존의 "SRC"속성 변경) 만 $ ( "요소")를 사용하여 요소를 숨길 수 있습니다. 숨기기 () 또는 비슷한. 이 작업을 수행하기 전에, 그래서 같이로드 이벤트 핸들러를 첨부 :

미리로드 및로드 같은 일이다. 당신은 이미지를 삽입 (중 새로 만들거나 기존의 "SRC"속성 변경) 만 $ ( "요소")를 사용하여 요소를 숨길 수 있습니다. 숨기기 () 또는 비슷한. 이 작업을 수행하기 전에, 그래서 같이로드 이벤트 핸들러를 첨부 :
```
var images = ["src1", "src2", "src3", "src4"];
var len = images.length;

for(i=0; i<len; i++){
    $("parent element").html('<img id="new-img" style="display:none;" src="'+images[i]+'"/>');
    $("new-img").load(function(){
        //Your image is now "preloaded"

        //Now you can show the image, or do other stuff
        $(this).show();
    });
}
```
4.미리로드는 새로운 이미지 요소를 만드는 그들이 모든로드 된 경우 모니터링 한 후 DOM에서 기존으로 교체 같은 몇 가지 추가 작업을합니다. 그러나 당신이 직접 교체하지 않고 DOM 요소를 무기한으로 여러 번에이 작업을 수행 할 수 있습니다.

미리로드는 새로운 이미지 요소를 만드는 그들이 모든로드 된 경우 모니터링 한 후 DOM에서 기존으로 교체 같은 몇 가지 추가 작업을합니다. 그러나 당신이 직접 교체하지 않고 DOM 요소를 무기한으로 여러 번에이 작업을 수행 할 수 있습니다.

우리는 이미지에 액세스하는 API를 가져 오기 사용할 수 있습니다 대기 그들은 모두 promise.all (내 다운로드) 한 후 하나의 이동에 단지 SRC가 window.requestAnimationFrame를 사용하여 가장 적합한 시간에 IMG 요소의 속성 교체 될 때까지 () .

다음 예에서 나는 IMG 요소 10 배의 src 속성을 새로 고칩니다. 지연에 따라, 나는 그것이 API에서 4 개 이미지를로드하기까지 걸리는 시간을 사용하고 있습니다. 우리가 일단 그래서 모든 이미지는 내가 바로 같은 refreshImagesNTimes 재귀 적 기능을 호출하여 새로운 요청을 배치하고로드.

당신은 물론 한 번에 모든이 마음에 많은 이미지 모양으로 부하를 선택하고 간단한의 setTimeout 메커니즘을 사용하여 정확한 시간 간격으로 그룹을 표시 할 수 있습니다.

함수 refreshImagesNTimes는 (노드 목록은 카운트 = -1) { VAR imgPromises = Array.from ({길이 : nodeList.length}) .MAP (_ => 페치 ( "https://unsplash.it/480/640/?random")를 그 때는 (입술 => res.blob ())); Promise.all (imgPromises) 그 때는 (함수 (얼룩) { window.requestAnimationFrame (_ => nodeList.forEach ((IMG, I) => img.src = (window.URL || window.webkitURL) .createObjectURL (블롭 [I]))); --count && refreshImagesNTimes (노드 목록, 카운트); }); } VAR 이미지 = document.querySelectorAll ( "# 용기 IMG"); refreshImagesNTimes (이미지 10); #container { 표시 : 플렉스; 플렉스 랩 : 랩; 정당화 - 내용 : 공간 균등; 정렬-항목 : 센터; 마진 : 자동; 폭 : 75vw; 높이 : 56.25vw; 배경 색상 : # 000; 상자 크기 조정 : 국경 상자; } IMG { 폭 : 45 %; 높이 : 45 %; 배경 색상 : 엉겅퀴; }

from https://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 모바일 스크립트 설정 (0)	2020.10.22
[JQUERY] GET을 사용하여 새 페이지에있는 jqGrid의 열 값에서 연결 (0)	2020.10.22
[JQUERY] 마우스 오버 툴팁과 Multiseries 라인 차트 (0)	2020.10.22
[JQUERY] 새 열을 추가있는 jqGrid (0)	2020.10.22
[JQUERY] jQuery를에 깊은 아이를 선택 (0)	2020.10.22

복붙노트

[JQUERY] 이미지 프리 로더 자바 스크립트가 지원 이벤트

이미지 프리 로더 자바 스크립트가 지원 이벤트

해결법

1.여기에 마지막이 완료되면 콜백을 배열에서 이미지를 미리로드하고 호출하는 함수는 다음과 같습니다

2.보다 강력한 솔루션의 경우, 콜백의 커플 (jsFiddle)이 프리 로더 기능을 고려한다.

'JQUERY' 카테고리의 다른 글

티스토리툴바