javascript - 将图像动态加载到 Div

Question

我有一个个人资料图像列表，它们出现在最初通过 CSS 隐藏的“菜单下拉”div 中。我想在选择每个菜单项时动态加载这些图像（作为列表），以减少页面加载时间。这怎么可能？

Answer 1

尝试使用：

$("#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 响应后自动删除。

Answer 2

好吧，你可以试试这个：

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

Answer 3

在您的 HTML 中，省略每个图像标签上的 src 属性。相反，添加一个名为 data-src 的属性并为其提供图像 url。

然后，当显示菜单时，运行以下脚本：

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

如果您还没有，则所述脚本需要 jquery

Answer 4

您可以将图像列表保存在 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，它就会被浏览器自动加载。