將圖像加載到Div中

我有一個配置文件圖像列表，它出現在最初通過CSS隱藏的「menu drop down」div中。我想在選擇每個菜單項時動態加載這些圖像（作爲列表），以減少頁面加載時間。這怎麼可能？將圖像加載到Div中

2012-10-25 user200261

希望，你的意思是你想緩存這些圖像。如果您在選擇它們時開始加載它們，那麼它們很可能需要很長時間才能加載。 –

你可以使用jquery延遲加載http://www.appelsiini.net/projects/lazyload – Usman

你有沒有考慮用AJAX加載整個內容？ http://en.wikipedia.org/wiki/Ajax_(programming） – Jan

在您的HTML中省略了每個圖片標籤上的src屬性。相反，添加一個名爲data-src的屬性併爲其指定圖像url。

然後，當顯示菜單，運行以下腳本：

$('.menu-class img').each(function() { 
    $(this).attr('src', $(this).data('src')); 
});

說腳本需要jQuery的，如果你還沒有擁有它

來源

2012-10-25 04:33:24 Doug

雖然，正如Alex W指出的那樣，您可能希望在文檔就緒事件中執行此操作，而不是在菜單打開時進行此操作，以便圖像準備就緒打開 - 不是之後。 – Doug

最好使用：'$（this）.data（'src'）' –

每個代碼海盜的評論編輯。很酷，我不知道。 – Doug

嘗試使用：

$("#divID").html("<img style='position:absolute' src='path/to/the/ajax_loader.gif'>");

如果您使用ajax：

function sendAjax() 
    { 
     $("#divID").html("<img style='position:absolute' src='path/to/the/ajax_loader.gif'>"); 

     // you ajax code 

     $("#divID").html(ajaxResponse); 
    }

您也可以使用document.getElementById('divID').innerHTML而不是$("#divID").html()。它也工作正常

如果你使用這種方法，不需要使用css隱藏div。它會在ajax響應後自動刪除。

來源

2012-10-25 04:48:33 Nevin

你可以保持在一個JavaScript可變圖像列表：

var images = [ 
    'http://www.example.com/img/image1.png', 
    'http://www.example.com/img/image2.png', 
    'http://www.example.com/img/image3.png', 
    ... 
];

然後你就可以加載時，你需要通過創建圖像標籤的圖像：

var i = 0; // the index of the image in the list 
var $img = $('<img>').attr({'src':images[i]});

只是追加圖像你的div和它會被瀏覽器自動加載。

來源

2012-10-25 04:50:40

好了，你可以試試這個：

<div id="desiredDiv"> 
</div> 
<script> 
var images = [ 
    'http://www.example.com/img/image1.png', 
    'http://www.example.com/img/image2.png', 
    'http://www.example.com/img/image3.png', 
    ... 
]; 
for(var i=0; i<images.length; i++) { 
    $('#desiredDiv').append('<img src="'+images[i]+'" alt="" />'); 
} 
</script>

來源

2012-10-25 06:58:26

我希望它能在一定程度上滿足您的疑問，如果不讓我知道 –

將圖像加載到Div中

回答

相關問題