加載橫幅圖像之前不加載頁面

我有不同的圖像加載到橫幅圖像。我不會在頁面加載之前加載圖片。加載橫幅圖像之前不加載頁面

<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

加載橫幅圖像之前不加載頁面

回答

相關問題