Question

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

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，它就会被浏览器自动加载。

动态地将图像加载到Div中

4 个答案: