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

嘿傢伙，我有一個非常複雜的頁面，有很多腳本和相當長的加載時間。在該頁面的頂部，我想實現jQuery Nivo Slider（http://nivo.dev7studios.com/）。jQuery，JavaScript，HTML：如何在加載其他所有內容後加載圖像？

在它說我必須列出一個div＃滑塊

<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>

不過，我可能有一個1000x400px這是相當大的10張圖像內滑塊所有圖像文件。這些圖像將在頁面加載時加載。由於他們在我的頭上，這可能需要一段時間。

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

任何想法如何解決這個問題？

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

來源

2011-03-23 matt

爲什麼不嘗試最小化圖像，然後將它們鏈接到較大的版本？ – corroded 2011-03-23 08:51:20

這是我們做的，它的工作很棒。我們跳過設置src屬性img，並將img-location添加到假屬性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; 
         }); 
        } 
       } 
      }); 
    });

編輯：訣竅是設置src屬性僅當源在臨時IMG被加載。$(img).load(fn);處理。

來源

2011-03-23 08:59:02 simplyharsh

謝謝你，好主意！它也可以在IE中工作嗎？ – matt 2011-03-23 19:35:36

你怎麼沒有這樣做？ $（'img'）。each（function（）{（this）.attr（'src'，$（this）.attr（'lsrc'））; }）; 也許你的方式更快？ – 2011-08-16 03:22:47

@matt是的，它也適用於IE。 – simplyharsh 2012-06-14 09:15:05

-2

jQuery有用於執行JavaScript語法文件加載後：

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

//your function implementation here... 

}); 
</script>

來源

2011-03-23 08:49:09 Xhalent

或$（function（）{ ））; – 2011-03-23 08:54:25

這是不正確的，因爲此函數綁定到DOM就緒事件，而不是窗口加載。窗口加載事件是告訴你一切都被加載的事件。 – 2013-02-05 10:20:23

check out jQuery的負載（）事件，等待一切，包括圖形負載

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

，那麼你可以加載圖像使用：

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

您可以添加一個函數onload到圖像太

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

來源

2011-03-23 08:51:04

除了Xhalent的答案，可以使用jQuery中的.append（）函數將它們添加到DOM：

你的HTML只想有：

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

然後你的jquery會是：

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

來源

2011-03-23 08:53:51

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

回答

相關問題