Tải trước hình ảnh với jQuery

Tôi đang tìm kiếm một cách nhanh chóng và dễ dàng để tải trước hình ảnh bằng JavaScript. Tôi đang sử dụng jQuery nếu điều đó quan trọng.

Tôi đã thấy điều này ở đây ( 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" });
  }
};

Nhưng, nó có vẻ hơi quá so với những gì tôi muốn!

Tôi biết có các plugin jQuery ngoài đó làm điều này nhưng tất cả chúng có vẻ hơi lớn (về kích thước); Tôi chỉ cần một cách nhanh chóng, dễ dàng và ngắn gọn để tải trước hình ảnh!

Nhanh chóng và dễ dàng:

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

Hoặc, nếu bạn muốn một plugin jQuery:

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

// Usage:

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

Đây là phiên bản được điều chỉnh của phản hồi đầu tiên thực sự tải hình ảnh vào DOM và ẩn nó theo mặc định.

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

Sử dụng đối tượng hình ảnh JavaScript .

Chức năng này cho phép bạn kích hoạt một cuộc gọi lại khi tải tất cả các hình ảnh. Tuy nhiên, lưu ý rằng nó sẽ không bao giờ kích hoạt cuộc gọi lại nếu ít nhất một tài nguyên không được tải. Điều này có thể dễ dàng khắc phục bằng cách thực hiện onerrorgọi lại và tăng loadedgiá trị hoặc xử lý lỗi.

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, Sau khi kiểm tra giải pháp của bạn, tôi vẫn gặp sự cố trong Firefox khi nó không tải trước hình ảnh trước khi di chuyển cùng với việc tải trang. Tôi phát hiện ra điều này bằng cách đặt một số sleep(5)trong kịch bản phía máy chủ của tôi. Tôi đã thực hiện các giải pháp sau đây dựa trên giải pháp của bạn.

Về cơ bản tôi đã thêm một cuộc gọi lại vào plugin tải trước jQuery của bạn, để nó được gọi sau khi tất cả các hình ảnh được tải đúng cách.

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

Không quan tâm, trong ngữ cảnh của tôi, tôi đang sử dụng điều này như sau:

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

Hy vọng rằng điều này sẽ giúp ai đó đến trang này từ Google (như tôi đã làm) đang tìm kiếm một giải pháp để tải trước hình ảnh trên các cuộc gọi Ajax.

Mã jQuery một dòng này tạo (và tải) một phần tử DOM img mà không hiển thị nó:

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

Cách sử dụng khá đơn giản:

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

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

Tôi có một plugin nhỏ xử lý việc này.

Nó được gọi là WaitForImages và nó có thể xử lý imgcác phần tử hoặc bất kỳ phần tử nào có tham chiếu đến hình ảnh trong CSS, ví dụ:div { background: url(img.png) } .

Nếu bạn chỉ đơn giản muốn tải tất cả các hình ảnh, bao gồm cả những hình ảnh được tham chiếu trong CSS, thì đây là cách bạn sẽ làm điều đó :)

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

bạn có thể tải hình ảnh trong html của mình ở đâu đó bằng css display:none; quy tắc , sau đó hiển thị chúng khi bạn muốn với js hoặc jquery

không sử dụng các hàm js hoặc jquery để tải trước chỉ là quy tắc css Vs nhiều dòng js sẽ được thực thi

ví dụ: 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();

Tải trước hình ảnh bằng jquery / javascript không tốt vì hình ảnh mất vài mili giây để tải trang + bạn có một phần nghìn giây để tập lệnh được phân tích cú pháp và thực thi, đặc biệt sau đó nếu chúng là hình ảnh lớn, thì việc ẩn chúng trong hml cũng tốt hơn cho hiệu suất, vì hình ảnh thực sự được tải sẵn mà không hiển thị, cho đến khi bạn hiển thị điều đó!

jquery này imageLoaderplugin này chỉ là 1,39kb

sử dụng:

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

Ngoài ra còn có các tùy chọn khác như bạn muốn tải hình ảnh đồng bộ hay không đồng bộ và một sự kiện hoàn chỉnh cho từng hình ảnh riêng lẻ.

Cách nhanh chóng, không có plugin để tải trước hình ảnh trong jQuery và có chức năng gọi lại là tạo nhiều imgthẻ cùng một lúc và đếm các phản hồi, ví dụ:

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

Lưu ý rằng nếu bạn muốn hỗ trợ IE7, bạn sẽ cần sử dụng phiên bản nhỏ hơn một chút này (cũng hoạt động trong các trình duyệt khác):

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

Cám ơn vì cái này! Tôi muốn nói thêm một chút về câu trả lời của JP - Tôi không biết điều này có giúp được ai không, nhưng bằng cách này bạn không phải tạo ra một mảng hình ảnh và bạn có thể tải trước tất cả các hình ảnh lớn của mình nếu bạn đặt tên chính xác cho ngón tay cái của bạn Điều này rất hữu ích vì tôi có ai đó đang viết tất cả các trang bằng html và nó đảm bảo một bước nữa để họ thực hiện - loại bỏ nhu cầu tạo mảng hình ảnh và một bước khác để mọi thứ có thể được giải quyết.

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

Về cơ bản, đối với mỗi hình ảnh trên trang, nó lấy src của mỗi hình ảnh, nếu nó phù hợp với tiêu chí nhất định (là ngón tay cái hoặc hình ảnh trang chủ), nó sẽ thay đổi tên (một chuỗi cơ bản thay thế trong src hình ảnh), sau đó tải hình ảnh .

Trong trường hợp của tôi, trang có đầy đủ các hình ảnh ngón tay cái được đặt tên giống như image_th.jpg và tất cả các hình ảnh lớn tương ứng được đặt tên là image_lg.jpg. Ngón cái to lớn chỉ thay thế _th.jpg bằng _lg.jpg và sau đó tải trước tất cả các hình ảnh lớn.

Hy vọng điều này sẽ giúp được ai đó.

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

Tôi sử dụng mã sau đây:

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

Tôi sẽ sử dụng tệp Manifest để thông báo cho các trình duyệt web (hiện đại) để tải tất cả các hình ảnh có liên quan và lưu trữ chúng. Sử dụng Grunt và grunt-manifest để thực hiện việc này một cách tự động và không bao giờ lo lắng về các tập lệnh tải trước, bộ vô hiệu hóa bộ đệm, CDN, v.v.

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

Điều này làm việc cho tôi ngay cả trong IE9:

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

Tôi muốn làm điều này với lớp phủ tùy chỉnh API Google Maps. Mã mẫu của họ chỉ đơn giản là sử dụng JS để chèn các phần tử IMG và hộp giữ chỗ hình ảnh được hiển thị cho đến khi hình ảnh được tải. Tôi tìm thấy một câu trả lời ở đây có hiệu quả với tôi: https://stackoverflow.com/a/10863680/2095698 .

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

Điều này tải trước một hình ảnh như được đề xuất trước đó, và sau đó sử dụng trình xử lý để nối thêm đối tượng img sau khi URL img được tải. Tài liệu của jQuery cảnh báo rằng các hình ảnh được lưu trong bộ nhớ cache không hoạt động tốt với mã xử lý sự kiện / xử lý này, nhưng nó hoạt động với tôi trong FireFox và Chrome và tôi không phải lo lắng về IE.

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

.attr('src',value) không phải .attr('src',this)

chỉ để chỉ ra thôi :)

5 dòng trong cà phê

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

Đối với những người biết một chút về bản mô tả, bạn có thể kiểm tra trình phát flash, với nỗ lực tối thiểu và tạo trình tải trước flash, bạn cũng có thể xuất sang html5 / Javascript / Jquery. Để sử dụng nếu trình phát flash không được phát hiện, hãy kiểm tra các ví dụ về cách thực hiện việc này với vai trò youtube trở lại trình phát html5 :) Và tạo riêng của bạn. Tôi không có thông tin chi tiết, vì tôi chưa bắt đầu, nếu tôi không quên, tôi sẽ đăng nó sau và sẽ thử một số mã Jquery độc lập để khai thác.