jQuery로 이미지 사전로드

JavaScript로 이미지를 미리로드하는 빠르고 쉬운 방법을 찾고 있습니다. 중요한 경우 jQuery를 사용하고 있습니다.

나는 이것을 여기에서 보았다 ( http : //nettuts.com ... ) :

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

그러나, 그것은 내가 원하는 것에 대해 약간 이상하게 보입니다!

나는 이것을 수행하는 jQuery 플러그인이 있다는 것을 알고 있지만 모두 조금 크다 (크기). 이미지를 빠르고 쉽고 빠르게 미리로드하는 방법 만 있으면됩니다.

빠른 및 쉬운 :

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();

다음은 실제로 이미지를 DOM에로드하고 기본적으로 숨기는 첫 번째 응답의 수정 된 버전입니다.

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

JavaScript 이미지 객체를 사용하십시오 .

이 기능을 사용하면 모든 사진을로드 할 때 콜백을 트리거 할 수 있습니다. 그러나 하나 이상의 리소스가로드되지 않은 경우 콜백을 트리거하지 않습니다. onerror콜백 및 증분 loaded값 을 구현 하거나 오류를 처리하여 쉽게 해결할 수 있습니다 .

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');
});

JP, 솔루션을 확인한 후에도 페이지로드와 함께 이동하기 전에 이미지를 미리로드하지 않는 Firefox에서 여전히 문제가 발생했습니다. sleep(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
  });
});

바라건대 이것은 Google 에서이 페이지를 방문하는 사람이 Ajax 호출에서 이미지를 미리로드하는 솔루션을 찾는 데 도움이되기를 바랍니다.

이 한 줄의 jQuery 코드는 DOM 요소 img를 표시하지 않고 작성하고로드합니다.

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

$.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/

이것을 처리하는 작은 플러그인이 있습니다.

waitForImages 라고 img하며 CSS의 이미지를 참조하여 요소 또는 요소 를 처리 할 수 ​​있습니다 ( 예 :) div { background: url(img.png) }.

CSS에서 참조한 이미지를 포함하여 모든 이미지 를로드하려는 경우 다음 과 같이하십시오.

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

CSS display:none;규칙을 사용하여 HTML 어딘가에 이미지를로드 한 다음 js 또는 jquery로 원할 때 이미지 를 표시 할 수 있습니다

js 또는 jquery 함수를 사용하지 않고 미리로드하는 것은 CSS 규칙입니다.

예 : 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();

jquery / javascript로 이미지를 미리로드하는 것은 좋지 않습니다. 이미지를 페이지에로드하는 데 몇 밀리 초가 걸리고 스크립트를 파싱하고 실행하는 데 밀리 초가 있습니다 (특히 이미지가 큰 경우). 당신이 그것을 보여줄 때까지 이미지가 전혀 보이지 않고 실제로 미리로드됩니다!

이 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
    }
});

이미지를 동기식으로 또는 비동기식으로로드할지 여부 및 각 개별 이미지에 대한 전체 이벤트와 같은 다른 옵션도 있습니다.

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();
        }
    });
}

감사합니다! JP의 답변에 약간의 리프를 추가하고 싶습니다. 이것이 누군가에게 도움이되는지 모르겠지만이 방법으로 이미지 배열을 만들 필요가 없으며 큰 이미지를 미리로드 할 수 있습니다 엄지 손가락의 이름을 올바르게 지정하십시오. 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입니다. 엄지 손가락을 크게하면 _th.jpg가 _lg.jpg로 바뀌고 큰 이미지가 모두 미리로드됩니다.

이것이 누군가를 돕기를 바랍니다.

    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*/
        }
    )

다음 코드를 사용합니다.

$("#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";

매니페스트 파일을 사용하여 웹 브라우저에 모든 관련 이미지를로드하고 캐시하도록 알려줍니다. Grunt 및 grunt-manifest를 사용하여 자동으로이를 수행하고 사전로드 스크립트, 캐시 무효화 기, CDN 등에 대해 다시 걱정하지 않아도됩니다.

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

이것은 IE9에서도 작동합니다.

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

Google Maps API 맞춤 오버레이로이 작업을 수행하고 싶었습니다. 샘플 코드는 JS를 사용하여 IMG 요소를 삽입하며 이미지가로드 될 때까지 이미지 자리 표시 자 상자가 표시됩니다. https://stackoverflow.com/a/10863680/2095698 에서 도움이되는 답변을 찾았습니다 .

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

이전에 제안 된대로 이미지를 미리로드 한 다음 img URL이로드 된 후 핸들러를 사용하여 img 객체를 추가합니다. jQuery의 문서는 캐시 된 이미지 가이 이벤트 / 핸들러 코드와 잘 작동하지 않는다고 경고하지만 FireFox와 Chrome에서 나를 위해 일하고 있으며 IE에 대해 걱정할 필요가 없습니다.

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

.attr('src',value) 아니 .attr('src',this)

그냥 지적하기 위해 :)

커피 스크립트의 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

약간의 액션 스크립트를 아는 사용자는 최소한의 노력으로 플래시 플레이어를 확인하고 플래시 프리 로더를 만들어 html5 / Javascript / Jquery로 내보낼 수도 있습니다. 플래시 플레이어가 감지되지 않는 경우 사용하려면 youtube 역할을 사용하여 html5 플레이어로 돌아가는 방법에 대한 예를 확인하십시오. 내가 아직 잊어 버린 경우 세부 정보가 없으므로 아직 시작하지 않았기 때문에 나중에 게시해야하며 standerd Jquery 코드를 시험해 볼 것입니다.