将图像加载到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中

回答

相关问题