Question

我需要在幻灯片中使用大量图片，并且我希望在使用之前预先加载它我用过这段代码

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

$(['../img/portfolio_arrko_1.jpg', '../img/portfolio_arrko_2.jpg', '../img/portfolio_arrko_3.jpg', '../img/portfolio_arrko_4.jpg', '../img/portfolio_arrko_5.jpg', '../img/portfolio_arrko_6.jpg', '../img/portfolio_arrko_7.jpg', '../img/portfolio_politics_1.jpg', '../img/portfolio_politics_2.jpg', '../img/portfolio_politics_3.jpg', '../img/portfolio_politics_4.jpg', '../img/portfolio_politics_5.jpg', '../img/portfolio_politics_6.jpg', '../img/portfolio_politics_7.jpg', '../img/portfolio_city_1.jpg', '../img/portfolio_city_2.jpg', '../img/portfolio_city_3.jpg', '../img/portfolio_city_4.jpg', '../img/portfolio_city_5.jpg', '../img/portfolio_city_6.jpg', '../img/portfolio_invest_1.jpg', '../img/portfolio_invest_2.jpg', '../img/portfolio_invest_3.jpg', '../img/portfolio_invest_4.jpg', '../img/portfolio_nidec_1.jpg', '../img/portfolio_nidec_2.jpg', '../img/portfolio_nidec_3.jpg', '../img/portfolio_nidec_4.jpg', '../img/portfolio_nidec_5.jpg', '../img/portfolio_nidec_6.jpg', '../img/portfolio_nidec_7.jpg', '../img/portfolio_nidec_8.jpg', '../img/portfolio_nidec_9.jpg', '../img/portfolio_nidec_10.jpg', '../img/portfolio_nidec_11.jpg', '../img/portfolio_zavod_1.jpg', '../img/portfolio_zavod_2.jpg', '../img/portfolio_zavod_3.jpg', '../img/portfolio_zavod_4.jpg', '../img/portfolio_zavod_5.jpg', '../img/portfolio_zavod_6.jpg', '../img/portfolio_zavod_7.jpg', '../img/portfolio_zavod_8.jpg', '../img/portfolio_zavod_9.jpg', '../img/portfolio_razvitie_1.jpg', '../img/portfolio_razvitie_2.jpg', '../img/portfolio_razvitie_3.jpg', '../img/portfolio_razvitie_4.jpg', '../img/portfolio_razvitie_5.jpg', '../img/portfolio_razvitie_6.jpg', '../img/portfolio_rzanik_1.jpg', '../img/portfolio_rzanik_2.jpg', '../img/portfolio_rzanik_3.jpg', '../img/portfolio_rzanik_4.jpg', '../img/portfolio_rzanik_5.jpg', , '../img/portfolio_rzanik_6.jpg', '../img/portfolio_sport_1.jpg', '../img/portfolio_sport_2.jpg', '../img/portfolio_sport_3.jpg', '../img/portfolio_sport_4.jpg', '../img/portfolio_sport_5.jpg', '../img/portfolio_sport_6.jpg', '../img/portfolio_sport_7.jpg', '../img/portfolio_sport_8.jpg', '../img/portfolio_stal_1.jpg', '../img/portfolio_stal_2.jpg', '../img/portfolio_stal_3.jpg', '../img/portfolio_stal_4.jpg', '../img/portfolio_stal_5.jpg', '../img/portfolio_stal_6.jpg', '../img/portfolio_stal_7.jpg', '../img/portfolio_stal_8.jpg', '../img/portfolio_stal_9.jpg', '../img/portfolio_hleb_1.jpg', '../img/portfolio_hleb_2.jpg', '../img/portfolio_hleb_3.jpg', '../img/portfolio_hleb_4.jpg', '../img/portfolio_hleb_5.jpg', '../img/portfolio_hleb_6.jpg', '../img/portfolio_elit_1.jpg', '../img/portfolio_elit_2.jpg', '../img/portfolio_elit_3.jpg', '../img/portfolio_elit_4.jpg', '../img/portfolio_elit_5.jpg']).preload();

但我不确定，它会起作用吗？也许，有没有更好的方法呢？

Answer 1

这会有效，但请注意此过程不会推迟DOM-ready-event 。这意味着当图像尚未加载时，可能会显示实际使用的位置。

此方法适用于动态Web应用程序，即最初未显示图像的情况，但是当某些页面活动发生时（例如，创建并显示包含其中一个预先存储的图像的新窗口小部件时）。

Answer 2

正如@Andrew所提到的，您可能希望了解所有图像何时完全加载。为此，您可以计算加载图像的数量，如下所示：

<script language="javascript">
$(function() {

    var $imgs = $(['1.jpg', '2.jpg', '3.jpg']);// Please chenge to actual image paths.
    var num_total = $imgs.length;
    var num_loaded = 0;

    $.fn.preload = function() {
        this.each(function(){
            $("<img/>").attr("src", this).load(function() {
                num_loaded++;
                if (num_loaded >= num_total) {
                    // Now all images are fully loaded. 
                    // You can start your great slideshow.
                    alert("preload complete");
                }
            });
        });
    }

    $imgs.preload(); // call above function

});
</script>

希望这有帮助。

使用jQuery或JavaScript进行图像预加载

2 个答案: