首頁猿問使用jQuery預(yù)加載圖像

使用jQuery預(yù)加載圖像

JavaScript JQuery

慕哥6287543 2019-05-27 11:06:37

使用jQuery預(yù)加載圖像我正在尋找一種使用JavaScript預(yù)加載圖像的快捷方法。我正在使用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插件可以做到這一點，但它們看起來都有點大（大?。? 我只需要快速，簡單和簡短的預(yù)加載圖像方式！

查看完整描述

4 回答

心有法竹

TA貢獻1866條經(jīng)驗獲得超5個贊

快速和簡單的：

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

反對回復(fù) 2019-05-27

守著星空守著你

TA貢獻1799條經(jīng)驗獲得超8個贊

JP，在檢查了你的解決方案之后，我仍然在Firefox中遇到問題，在加載頁面之前它不會預(yù)先加載圖像。我sleep(5)在服務(wù)器端腳本中添加了一些內(nèi)容。我實現(xiàn)了以下基于你的解決方案，似乎解決了這個問題。

基本上我添加了一個回調(diào)你的jQuery preload插件，以便在所有圖像正確加載后調(diào)用它。

// 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調(diào)用上預(yù)加載圖像的解決方案。

反對回復(fù) 2019-05-27