加载横幅图像之前不加载页面

我有不同的图像加载到横幅图像。我不会在页面加载之前加载图片。加载横幅图像之前不加载页面

<div id="banner-image" class="col-md-12"> 
<img class="img-responsive" src="http://i.imgur.com/pAqR6tw.png"> 
</div>

我看过jQuery的预加载图片的几种方法，它们看起来都非常沉重。我想知道是否有人有任何想法更轻巧？

来源

2014-09-22 probablybest

用JS做，没有jQuery是一个可能性。而且相对容易。 'var img = document.createElement（'img'）; img.onload = somefunction; img.src ='foo.jpg';' – 2014-09-22 16:42:15

有没有办法做到这一点而不必申报img src？因为我会有很多不同的图像。 – probablybest 2014-09-22 16:44:07

将所有其余的页面内容放在一个元素中（比如说，一个div）和一个隐藏它的类（比如"hidden"）。确保您的横幅标记是非常接近顶部（理想情况下，在开始<body>标签后立即）。那么做到这一点：

<div id="banner-image" class="col-md-12"> 
<img class="img-responsive" 
    src="http://i.imgur.com/pAqR6tw.png" 
    onload="$('#content').removeClass('hidden');"> 
</div>

或者更好的是，对于这个具体的使用情况，避免了jQuery的依赖性：

<div id="banner-image" class="col-md-12"> 
<img class="img-responsive" 
    src="http://i.imgur.com/pAqR6tw.png" 
    onload="document.getElementByid('content').className = '';"> 
</div>

...所以jQuery不会有满载时，图像的发生事件load。

如果你不喜欢使用onXyz属性，你可以给你img的id和（刚刚闭幕</body>标记之前最好）把这个代码的jquery.jsscript标签后：

var $img = $("#the-img-id"); 
$img.one("load", function() { 
    $("#content").removeClass("hidden"); 
}); 
if ($img[0].complete) { 
    $img[0].trigger("load"); 
}

处理该潜在围绕load事件的竞赛状况。

来源

2014-09-22 16:44:47

-1

/*$("img").one("load", function() { 
 
    alert('loaded') 
 
}).each(function() { 
 
    if(this.complete) $(this).load(); 
 
});*/ 
 
function onImagesLoaded($container, callback) { 
 
    var $images = $container.find("img"); 
 
    var imgCount = $images.length; 
 
    if (!imgCount) { 
 
     callback(); 
 
    } else { 
 
     $("img", $container).each(function() { 
 
      $(this).one("load error", function() { 
 
       imgCount--; 
 
       if (imgCount == 0) { 
 
        callback(); 
 
       } 
 
      }); 
 
      if (this.complete) $(this).load(); 
 
     }); 
 
    } 
 
} 
 

 
onImagesLoaded($("#banner-image"), function() { 
 
    $('#loading').hide(); 
 
});

#loading { 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    position: fixed; 
 
    display: block; 
 
    background-color: green; 
 
    z-index: 99; 
 
    opacity:0.8; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loading"></div> 
 
<div id="banner-image" class="col-md-12"> 
 
<img class="img-responsive" src="http://i.imgur.com/pAqR6tw.png"> 
 
</div>

来源

2014-09-22 17:13:01 AvrilAlejandro

加载横幅图像之前不加载页面

回答

相关问题