jQuery、JavaScript、HTML：如何在加載其他所有內容后加載圖像？

Question

我有一個非常復雜的頁面，有很多腳本和相當長的加載時間。 在該頁面的頂部，我想實現 jquery Nivo Slider ( http://nivo.dev7studios.com/ )。

在文檔中，它說我必須列出 div#slider 中滑塊的所有圖像

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

但是我可能有 10 張 1000x400px 的圖像，這是相當大的。 這些圖像會在頁面加載時加載。 由於它們在我的標題中，這可能需要很長時間。

我正在尋找一種方法來使用任何 jquery 滑塊插件（如 nivo 滑塊），但要么動態加載圖像，要么在頁面上的其他所有內容加載后加載所有這些圖像。

知道我該如何解決嗎？

在頁面上的所有其他內容加載后，甚至有沒有辦法啟動 javascript 進程？ 如果有一種方法可以解決我的問題（使用 jquery ajax load() 方法）...但是我不知道如何等待其他所有內容加載，然后使用所有圖像啟動滑塊。

Answer 1

這就是我們所做的，而且效果很好。 我們跳過設置src屬性img並加入IMG的位置進行假屬性lsrc 。 然后我們加載一個帶有lsrc值的動態圖像，並在加載后才設置實際圖像的src 。

它不是關於更快的加載，而是關於僅當圖像完全下載到您的頁面時才顯示圖像，這樣用戶就不必看到煩人的半載圖像。 在加載實際圖像時可以使用占位符圖像。

這是代碼。

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

編輯：技巧是僅在該源加載到臨時 img 中時才設置src屬性。 $(img).load(fn); 處理那個。

Answer 2

除了 Xhalent 的回答，使用 jQuery 中的 .append() 函數將它們添加到 DOM：

您的 HTML 將只有：

<div id="slider">
</div>

然后你的 jquery 將是：

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

Answer 3

查看jquery load() 事件，它等待包括圖形在內的所有內容

$(window).load(function () {
  // run code
});

在加載時，您可以使用以下方法加載圖像：

var image = new Image();
image.src = "/path/to/huge/file.jpg";

您也可以向圖像添加一個函數 onload

image.onload = function() {
  ...
}

Answer 4

我正在使用以下內容為我的滑塊提供動力並提高頁面加載性能。

   for (var i = document.images.length - 1; i >= 0; i--) {
      var this_image = document.images[i];
      var src = $(this_image).attr('src') || '' ;
      if(!src.length > 0){
        var lsrc = $(this_image).attr('lsrc') || '' ;
        if(lsrc.length > 0){
          $(this_image).attr("src",lsrc);
        }
      }
    }

Answer 5

最好的使用方法是b -lazy js 。 bLazy 是一個輕量級的延遲加載圖片腳本（壓縮和壓縮后小於 1.2KB）。 它可以讓你延遲加載和多服務你的圖像，這樣你就可以節省帶寬和服務器請求。 如果用戶不瀏覽整個頁面，他/她將有更快的加載時間並保存加載的數據。 有關選項、功能和示例的完整列表，請訪問博客文章： http : //dinbror.dk/blog/blazy 。

以下示例是帶有圖像回調的延遲加載多服務響應式圖像示例 :) 如果您的設備寬度小於 420 像素，它將提供更輕和更小的圖像版本。 加載圖像后，它會在回調中刪除加載器。

在 HTML 中

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

在js中

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

例子

Answer 6

jquery 有一個在文檔加載后執行 javascript 的語法：

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>