복붙노트

[JQUERY] jQuery로 미리로드 이미지

JQUERY

jQuery로 미리로드 이미지

해결법

  1. 1.빠르고 쉬운 :

    빠르고 쉬운 :

    function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

    또는, 당신은 jQuery 플러그인을 원하는 경우 :

    $.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

  2. 2.여기에 실제로 기본적으로 DOM에 이미지와 가죽을로드하는 첫 번째 응답의 불통 버전입니다.

    여기에 실제로 기본적으로 DOM에 이미지와 가죽을로드하는 첫 번째 응답의 불통 버전입니다.

    function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

  3. 3.를 사용하여 자바 스크립트 이미지 객체입니다.

    를 사용하여 자바 스크립트 이미지 객체입니다.

    이 기능을 사용하면 모든 사진을로드 할 때 콜백을 트리거 할 수 있습니다. 적어도 하나의 자원이로드되지 않은 경우, 노트는 콜백을 트리거하지 않을 것입니다. 이 콜백의 OnError 쉽게 구현되고로드 값을 증가 또는 에러 처리에 의해 고정 될 수있다.

    var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

  4. 4.JP는 솔루션을 확인한 후, 나는 여전히 페이지를로드와 함께 이동하기 전에 이미지를 미리로드하지 않을 파이어 폭스에서 문제가되었다. 내 서버 측 스크립트에 잠 (5)을 넣어이를 발견했다. 나는이 문제를 해결하는 것 같다 당신 기반으로 다음과 같은 솔루션을 구현했습니다.

    JP는 솔루션을 확인한 후, 나는 여전히 페이지를로드와 함께 이동하기 전에 이미지를 미리로드하지 않을 파이어 폭스에서 문제가되었다. 내 서버 측 스크립트에 잠 (5)을 넣어이를 발견했다. 나는이 문제를 해결하는 것 같다 당신 기반으로 다음과 같은 솔루션을 구현했습니다.

    기본적으로 나는 모든 이미지가 제대로로드 된 후 호출됩니다 그래서, 당신의 jQuery를 프리로드 플러그인에 콜백을 추가했다.

    // Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

    관심 부족, 내 맥락에서 다음과 같이 내가 이것을 사용하고 있습니다 :

    $.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

    희망이 (내가 그랬던 것처럼) 아약스 통화에서 이미지를 사전로드에 대한 해결책을 찾고 구글이 페이지에 오는 사람을 도움이됩니다.

  5. 5.이 한 줄의 jQuery 코드를 표시하지 않고 DOM 요소의 IMG를 생성 (로드) :

    이 한 줄의 jQuery 코드를 표시하지 않고 DOM 요소의 IMG를 생성 (로드) :

    $('<img src="img/1.jpg"/>');

  6. 6.

    $.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

    사용법은 매우 간단합니다 :

    $('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

    http://jsfiddle.net/yckart/ACbTK/

  7. 7.나는 이것을 처리하는 작은 플러그인을 가지고있다.

    나는 이것을 처리하는 작은 플러그인을 가지고있다.

    그것은 waitForImages을라고하고는 CSS 화상에 대한 참조, 예를 들어 함께 IMG 요소 또는 모든 요소를 ​​처리 할 DIV {배경 : 홈페이지 (img.png)}.

    당신은 단순히 여기의 CSS에서 참조 포함한 모든 이미지를로드 할 수 원하는 경우 어떻게 할 것입니다 :

    $('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

  8. 8.당신은 CSS 디스플레이를 사용하여 html로 어딘가에 이미지를로드 할 수 없습니다 : 없음; 당신은 JS 또는 JQuery와 함께 할 때 규칙, 다음 그들에게 보여

    당신은 CSS 디스플레이를 사용하여 html로 어딘가에 이미지를로드 할 수 없습니다 : 없음; 당신은 JS 또는 JQuery와 함께 할 때 규칙, 다음 그들에게 보여

    프리로드는 JS 많은 라인이 실행하는 대 단지 CSS 규칙입니다에 JS 또는 JQuery와 함수를 사용하지 않는

    예 : HTML

    <img src="someimg.png" class="hide" alt=""/>

    CSS는 :

    .hide{
display:none;
}

    jQuery를 :

    //if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

    , expecially에 그들은 큰 이미지를, 그래서 만약 HML에서 그들을 숨어 JQuery와에 의해 이미지 미리로드 / 자바 스크립트가 좋은 원인 이미지가 페이지에서 부하에 몇 밀리 초 소요 + 스크립트 구문 분석하고 실행하는 당신이 밀리 초를하지 않는 것은, 성능을 위해 더 나은도 당신이 보여까지 원인이 이미지는 정말 전혀 볼 수 beeing는하지 않고 사전로드!

  9. 9.이 JQuery와하여 ImageLoader 플러그인은 1.39kb이다

    이 JQuery와하여 ImageLoader 플러그인은 1.39kb이다

    용법:

    $({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

    당신이 동기 또는 asychronously 이미지를로드 할 것인지와 같은 다른 옵션과 각 이미지에 대한 전체 이벤트도 있습니다.

  10. 10.jQuery를에 프리로드 이미지에 대한 신속, 플러그인이없는 방법 및 콜백 함수는, 예를 한 번에 여러 IMG 태그를 생성하고 응답을 계산하는 것입니다 얻을

    jQuery를에 프리로드 이미지에 대한 신속, 플러그인이없는 방법 및 콜백 함수는, 예를 한 번에 여러 IMG 태그를 생성하고 응답을 계산하는 것입니다 얻을

    function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

    당신은 IE7을 지원하려는 경우, 당신은 (다른 브라우저에서 작동)이 약간 덜 꽤 버전을 사용해야합니다 :

    function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

  11. 11.이 주셔서 감사합니다! 이 의지 도움말 사람하지만,이 방법은 당신이 이미지의 배열을 만들 수없는 경우 나도 몰라, 당신은 당신의 큰 이미지를 미리로드 - 나는 JP의 대답에 약간의 리프를 추가 할 liek 것 올바르게 엄지 손가락의 이름을합니다. 나는 HTML의 모든 페이지를 작성하는 사람이 있기 때문에이 편리하고, 한 적은 그들이 할 수있는위한 단계 보장 - 이미지 배열을 생성 할 필요가 없습니다 일들이 망쳐 얻을 수있는 또 다른 단계를.

    이 주셔서 감사합니다! 이 의지 도움말 사람하지만,이 방법은 당신이 이미지의 배열을 만들 수없는 경우 나도 몰라, 당신은 당신의 큰 이미지를 미리로드 - 나는 JP의 대답에 약간의 리프를 추가 할 liek 것 올바르게 엄지 손가락의 이름을합니다. 나는 HTML의 모든 페이지를 작성하는 사람이 있기 때문에이 편리하고, 한 적은 그들이 할 수있는위한 단계 보장 - 이미지 배열을 생성 할 필요가 없습니다 일들이 망쳐 얻을 수있는 또 다른 단계를.

    $("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

    이 특정 기준 (엄지 손가락, 또는 홈 페이지 이미지)가 (기본 문자열이 이미지 SRC에서 대체를) 이름을 변경 한 후로드 이미지를 일치하는 경우 기본적으로 페이지의 각 이미지는 각 이미지의 SRC를 잡고 .

    내 경우에는 페이지의 모든 image_th.jpg 같은 이름을 엄지 손가락 이미지의 전체, 그리고 모든 해당하는 큰 이미지는 image_lg.jpg 이름이 지정됩니다. 대형 엄지 손가락은 _lg.jpg와 _th.jpg을 대체하고 모든에게 큰 이미지를 미리로드.

    이 사람을 도움이되기를 바랍니다.

  12. 12.

        jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

  13. 13.나는 다음과 같은 코드를 사용 :

    나는 다음과 같은 코드를 사용 :

    $("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

  14. 14.나는 또한 모든 관련 이미지와 캐시를로드 (현대) 웹 브라우저를 이야기하는 매니페스트 파일을 사용합니다. 사용 그런트와 꿀꿀 - 매니페스트 자동으로 수행하고 프리로드 스크립트, 캐시 invalidators, CDN 등에 대해 다시 걱정하지 않을 수 있습니다

    나는 또한 모든 관련 이미지와 캐시를로드 (현대) 웹 브라우저를 이야기하는 매니페스트 파일을 사용합니다. 사용 그런트와 꿀꿀 - 매니페스트 자동으로 수행하고 프리로드 스크립트, 캐시 invalidators, CDN 등에 대해 다시 걱정하지 않을 수 있습니다

    https://github.com/gunta/grunt-manifest

  15. 15.이는 IE9에서도 나를 위해 작동합니다 :

    이는 IE9에서도 나를 위해 작동합니다 :

    $('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

  16. 16.나는 구글지도 API 사용자 정의 오버레이와 함께이 일을 원했다. 이들 샘플 코드는 단순히 IMG 요소를 추가하는 JS를 사용하여 이미지가로드 될 때까지 화상 틀 상자가 표시되어있다. https://stackoverflow.com/a/10863680/2095698 : 나는 나를 위해 일한 여기에 대한 답을 발견했다.

    나는 구글지도 API 사용자 정의 오버레이와 함께이 일을 원했다. 이들 샘플 코드는 단순히 IMG 요소를 추가하는 JS를 사용하여 이미지가로드 될 때까지 화상 틀 상자가 표시되어있다. https://stackoverflow.com/a/10863680/2095698 : 나는 나를 위해 일한 여기에 대한 답을 발견했다.

    $('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

    이 사전로드 한 후 이전 제안과 같은 이미지는 IMG의 URL이로드 된 후 IMG 객체를 추가 할 핸들러를 사용합니다. jQuery의 문서는 캐시 된 이미지가이 이벤 팅 / 핸들러 코드와 잘 작동하지 않는 것을 경고하지만, 파이어 폭스와 크롬에서 나를 위해 일하고, 나는 IE에 대해 걱정할 필요가 없습니다.

  17. 17.

    function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

    .attr ( 'SRC'값) 아니 .attr ( 'SRC'이)

    단지 그것을 지적합니다 :)

  18. 18.나는 보통 페이지의 이미지를로드 내 프로젝트에이 코드 조각을 사용합니다. 현재 결과 https://jsfiddle.net/ftor34ey/을 볼 수 있습니다

    나는 보통 페이지의 이미지를로드 내 프로젝트에이 코드 조각을 사용합니다. 현재 결과 https://jsfiddle.net/ftor34ey/을 볼 수 있습니다

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<img src="https://live.staticflickr.com/65535/50020763321_d61d49e505_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50021019427_692a8167e9_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020228418_d730efe386_k_d.jpg" width="100" />
<img src="https://live.staticflickr.com/65535/50020230828_7ef175d07c_k_d.jpg" width="100" />

<div style="background-image: url(https://live.staticflickr.com/65535/50020765826_e8da0aacca_k_d.jpg);"></div>
<style>
    .bg {
        background-image: url("https://live.staticflickr.com/65535/50020765651_af0962c22e_k_d.jpg");
    }
</style>
<div class="bg"></div>

<div id="loadingProgress"></div>

    이 스크립트는 배열의 모든 SRC 및 페이지의 배경 이미지와 그들 모두를로드에 저장합니다.

    당신은 var에 loadCount에 의해로드의 진행률을 표시 / 읽기 / 볼 수 있습니다.

    let backgroundImageArray = [];

function backgroundLoading(i) {

    let loadCount = 0;

    let img = new Image();
    $(img).on('load', function () {

        if (i < backgroundImageArray.length) {

            loadCount = parseInt(((100 / backgroundImageArray.length) * i));
            backgroundLoading(i + 1);

        } else {

            loadCount = 100;
            // do something when the page finished to load all the images
            console.log('loading completed!!!');
            $('#loadingProgress').append('<div>loading completed!!!</div>');

        }

        console.log(loadCount + '%');
        $('#loadingProgress').append('<div>' + loadCount + '%</div>');

    }).attr('src', backgroundImageArray[i - 1]);

}

$(document).ready(function () {

    $('*').each(function () {

        var backgroundImage = $(this).css('background-image');
        var putInArray = false;

        var check = backgroundImage.substr(0, 3);

        if (check == 'url') {

            backgroundImage = backgroundImage.split('url(').join('').split(')').join('');
            backgroundImage = backgroundImage.replace('"', '');
            backgroundImage = backgroundImage.replace('"', '');

            if (backgroundImage.substr(0, 4) == 'http') {
                backgroundImage = backgroundImage;
            }
            putInArray = true;

        } else if ($(this).get(0).tagName == 'IMG') {

            backgroundImage = $(this).attr('src');
            putInArray = true;

        }

        if (putInArray) {
            backgroundImageArray[backgroundImageArray.length] = backgroundImage;
        }

    });

    backgroundLoading(1);

});

  19. 19.커피 스크립트에서 5 선

    커피 스크립트에서 5 선

    array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

  20. 20.ActionScript를 조금 알고있는 사람들을 위해, 당신은 최소한의 노력으로, 플래시 플레이어를 확인할 수 있습니다, 당신은 또한 HTML5로 내보낼 수 / 자바 스크립트 / jQuery를, 플래시 프리 로더를합니다. 플래시 플레이어가 감지되지 않은 경우, HTML5 플레이어로 유튜브 역할 다시이 작업을 수행하는 방법에 대한 예제를 확인 사용하려면 : 그리고 당신의 자신을 만들 수 있습니다. 나는 아직 시작하지 않은 렸기 때문에 나는 내가 잊었 해달라고하면, 내가 나중에 게시 줘야하고 내 일부 고안된 표준 jQuery 코드를하려고합니다, 세부 사항이 없습니다.

    ActionScript를 조금 알고있는 사람들을 위해, 당신은 최소한의 노력으로, 플래시 플레이어를 확인할 수 있습니다, 당신은 또한 HTML5로 내보낼 수 / 자바 스크립트 / jQuery를, 플래시 프리 로더를합니다. 플래시 플레이어가 감지되지 않은 경우, HTML5 플레이어로 유튜브 역할 다시이 작업을 수행하는 방법에 대한 예제를 확인 사용하려면 : 그리고 당신의 자신을 만들 수 있습니다. 나는 아직 시작하지 않은 렸기 때문에 나는 내가 잊었 해달라고하면, 내가 나중에 게시 줘야하고 내 일부 고안된 표준 jQuery 코드를하려고합니다, 세부 사항이 없습니다.

    21. from https://stackoverflow.com/questions/476679/preloading-images-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 사용자가 외부에서 클릭 할 때 사용 jQuery를가 DIV를 숨기려면  (0) 2020.09.21
[JQUERY] 어떻게 마이크로 소프트 JSON 날짜를 포맷합니까?  (0) 2020.09.21
[JQUERY] 오류 SecurityError는 : 크로스 원점 프레임 액세스 원점으로 프레임을 차단  (0) 2020.09.21
[JQUERY] 합니까 ID는 전체 페이지에서 고유해야?  (0) 2020.09.21
[JQUERY] jQuery를 모바일 : 문서 준비 대 페이지 이벤트  (0) 2020.09.21
,

티스토리툴바