10

好吧，我正在为此失去理智。我确实在 SO 和 google 上阅读过它，我什至有预加载器集（在 SO 上找到），但我发现的插件/代码都没有帮助我。

我想要做的是：等到所有图像都预加载，然后才执行所有其他 javascript 代码。就我而言，它可以（但不是必须）有“正在加载...”消息。

事实是我在身体背景中有一个相当大的图像和另外两个更大的图像，所以我想预加载它们，这样它们就会立即显示出来，并且不会有那种丑陋的“加载”图像效果。

这是我现在正在使用的，但它并不好：

$(document).ready(function()
{    
     preloadImages();
     ...some other code...

    function preloadImages(){
         imagePreloader([
            'images/1.png',
            'images/2.jpg',
            'images/3.png',                
         ]);
     } 

     function imagePreloader(arrayOfImages) {
         $(arrayOfImages).each(function(){
             (new Image()).src = this;
         });
     }   
}

我不知道，也许我应该在 .ready() 之外的某个地方调用这个预加载器？或类似的东西，请帮助...

顺便说一句，是的，我也读过这篇文章，我不知道为什么，但是 .ready() 对我来说工作得更快:(

编辑：
好的，所以最后我得到了这个东西。我的问题？我将等待的 div 设置错了。这是我现在的代码：我有加载 div，它显示在所有内容之上，然后当所有图像加载时（使用 $(window).load(function(){...})；按照我的建议，隐藏该 div。

<div id="loading">
    <div id="waiting">
        <img class="loadingGif" src="images/loading.gif">            
    </div>
</div>

#loading
{
   background-size: 100%;
   background-color:#000;
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   z-index:999;
}  

#waiting
{
   margin-left: auto;
   margin-right: auto;    
   position:absolute;
   top: 39%;
   left: 27.81%;
   width: 45%;
   height: 150px;    
   background-color: #FFF;
   border: 12px solid #FF771C;
   text-align: center;
}

我的 jQuery 代码是这样的： 

$(window).load(function()
{    
    $('#loading').addClass('hidden');  
    ...
}
4

6 回答 6

8

而不是尝试预加载，您可以在...上执行您的脚本

window.onload = function(){..}

在加载所有图像之前不会触发。

于 2011-05-03T13:12:50.790 回答
7

我有一个名为waitForImages的插件，可让您在加载后代图像时附加回调。

在您的情况下，如果您想等待所有资产下载，$(window).load()可能没问题。但是你可以用我的插件做得更酷一点:)

var loading = $('#loading');

$('body').waitForImages(function()
{    
    loading.addClass('hidden');  
}, function(loaded, total)
{
    loading.html(loaded + ' of ' + total);

});
于 2011-05-05T13:44:31.923 回答
1

您只能在加载后显示图像，如下所示：

<img src="hdimg.jpg" width="1920" height="1080" style="display:none;" id="img1">

<script type="text/javascript">
$('#img1').load(function(){
    $(this).css({'display':'block'})
});
</script>
于 2011-05-03T13:19:36.323 回答
1

我认为您正在寻找的是 javascript:onLoad()，它会在浏览器完成加载后立即调用。

于 2011-05-03T13:12:33.220 回答
1

waitForImages 插件是一个有趣的插件，但解决方案可以通过以下方式实现：

    var counter = 0;
    var size = $('img').length;

    $("img").load(function() { // many or just one image(w) inside body or any other container
        counter += 1;
        counter === size && $('body').css('background-color', '#fffaaa');
    }).each(function() {
      this.complete && $(this).load();        
    });
于 2016-04-01T19:21:29.540 回答
0

我相信最好的 jQuery 选项是使用 ajax get 调用：

$.get('image.png', {}, function(){
    // Do whatever you want here, this wont execute until image.png is preloaded
});
于 2013-02-12T03:40:14.800 回答