การโหลดภาพล่วงหน้าด้วย 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');
    });
}

การใช้งานจาวาสคริรูปภาพวัตถุ

ฟังก์ชั่นนี้ช่วยให้คุณสามารถโทรกลับเมื่อโหลดรูปภาพทั้งหมด อย่างไรก็ตามโปรดทราบว่าจะไม่มีการทริกเกอร์การโทรกลับหากไม่ได้โหลดทรัพยากรอย่างน้อยหนึ่งรายการ สิ่งนี้สามารถแก้ไขได้อย่างง่ายดายโดยใช้การ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.
    }  
});

คุณสามารถโหลดรูปภาพใน html ของคุณโดยใช้display:none;กฎcss จากนั้นแสดงรูปภาพเมื่อคุณต้องการด้วย js หรือ jquery

อย่าใช้ฟังก์ชัน js หรือ jquery เพื่อโหลดล่วงหน้าเป็นเพียงกฎ CSS และ js หลายบรรทัดที่จะดำเนินการ

ตัวอย่าง: 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 นั้นไม่ดีทำให้ภาพใช้เวลาไม่กี่มิลลิวินาทีในการโหลดหน้าเว็บ + คุณมีมิลลิวินาทีสำหรับสคริปต์ที่จะทำการแยกวิเคราะห์และประมวลผลโดยเฉพาะอย่างยิ่งถ้าเป็นภาพขนาดใหญ่ดังนั้นการซ่อนไว้ใน hml ทำให้ภาพถูกโหลดล่วงหน้าโดยไม่ต้องมองเห็นได้เลยจนกว่าคุณจะแสดงให้เห็น!

ปลั๊กอินimageLoader jquery นี้มีขนาดเพียง 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";

ฉันจะใช้ไฟล์ Manifest เพื่อบอกเว็บเบราเซอร์ (สมัยใหม่) เพื่อโหลดรูปภาพที่เกี่ยวข้องทั้งหมดและแคชพวกเขา ใช้ 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 URL แล้ว เอกสารของ jQuery เตือนว่ารูปภาพที่เก็บไว้ไม่ทำงานกับโค้ด eventing / handler นี้ แต่มันใช้ได้กับฉันใน 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

สำหรับผู้ที่รู้ actioncript นิดหน่อยคุณสามารถตรวจสอบ flash player ได้โดยใช้ความพยายามน้อยที่สุดและทำ flash preloader ที่คุณสามารถส่งออกไปยัง html5 / Javascript / Jquery วิธีใช้หากไม่พบตัวเล่นแฟลชให้ตรวจสอบตัวอย่างว่าทำอย่างไรกับบทบาทของ youtube กลับไปที่ html5 player :) และสร้างของคุณเอง ฉันยังไม่มีรายละเอียดเพราะฉันยังไม่ได้เริ่มถ้าฉันไม่ลืมฉันจะโพสต์ในภายหลังและจะลองใช้รหัส Jquery standerd กับฉัน