Question

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

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

我已经看过几种用jquery预加载图像的方法，这些方法看起来都非常沉重。我想知道是否有人有任何更轻量级的想法？

Answer 1

将所有其余的页面内容放在一个元素（例如，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

处理{{1}}事件周围的潜在竞争条件。

Answer 2

/*$("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>

在加载横幅图像之前，请勿加载页面

2 个答案: