我有不同的图像加载到横幅图像。我不希望在图像加载之前加载页面。
<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.js
script
标记之后(理想情况下,就在关闭</body>
标记之前):var $img = $("#the-img-id");
$img.one("load", function() {
$("#content").removeClass("hidden");
});
if ($img[0].complete) {
$img[0].trigger("load");
}
它处理
load
事件周围的潜在竞争条件。