将图像动态加载到Div中
将图像动态加载到Div中
提问于 2012-10-25 12:23:45
我有一个配置文件图像列表，它出现在“菜单下拉”目录中，最初是通过CSS隐藏的。我希望在选择每个菜单项时动态加载这些图像(作为列表)，以减少页面加载时间。这怎麽可能？
回答 4
Stack Overflow用户
发布于 2012-10-25 12:48:33
尝试使用：
$("#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响应后自动删除。
Stack Overflow用户
发布于 2012-10-25 14:58:26
好的，你可以试试这个：
<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>Stack Overflow用户
发布于 2012-10-25 12:33:24
在HTML中，省略每个图像标记上的src属性。相反，添加一个名为data-src的属性，并为其提供图像url。
然后，当菜单显示时，运行以下脚本：
$('.menu-class img').each(function() {
$(this).attr('src', $(this).data('src'));
});如果您还没有jquery，那么上述脚本需要jquery
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13061539
复制相关文章
相似问题
腾讯云开发者
