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

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

我已经研究了用JQuery预加载图像的几种方法,它们看起来都非常沉重。我想知道是否有人对更轻量级的解决方案有什么想法?

最佳答案

将页面内容的其余部分放在一个元素(比如,一个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>

…这样当图像的load事件发生时,jQuery不必完全加载。
如果您不喜欢使用onXyz属性,可以给img一个id并将此代码放在jquery.jsscript标记之后(理想情况下,就在关闭</body>标记之前):
var $img = $("#the-img-id");
$img.one("load", function() {
    $("#content").removeClass("hidden");
});
if ($img[0].complete) {
    $img[0].trigger("load");
}

它处理load事件周围的潜在竞争条件。

10-05 20:38
查看更多