[javascript] 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.
    }
});