1

我有一个包含 50 个缩略图的页面，一旦用户进入该站点就会加载。

我正在考虑创建一个loading...div 或可能使用动画 gif 来显示缩略图仍在加载，然后在加载后切换到该图像。

使用纯 JS 或 jQuery 的最佳选择是什么？如何处理这样的事情？

提前致谢

4

4 回答 4

2

缩略图的宽度和高度是固定的吗？

好吧，这里有一个关于如何做到这一点的想法......

var loading = $('<img src="loading.gif" alt="loading" />');
$('#thumbnail').each(function(){
   var loadIMG = loading.clone();
   $(this).after(loadIMG).load(function(){
      $(this).show();
      loadIMG.hide();
   }).hide();
});

资源

于 2010-08-02T10:04:38.973 回答
1

您可以使用纯 javascript，以避免 jQuery 库的开销。但是，如果您已经在您的网站上使用它，那么为什么不使用它。

于 2010-08-02T09:53:18.700 回答
1

您可以绑定到图像的加载事件。

var img = new Image(640, 480); 
img.src = '...';
$(img).bind('load', function() { 
  // Has loaded
});

也许每个图像都在一个li. 您可以加载li具有 的类的页面loading。使用 CSS 设置样式，使其看起来像您想要的加载位。绑定到load图像的事件并在回调中loading从 parent 中删除该类li。

于 2010-08-02T10:12:03.973 回答
1

您可以使用$(window).ready()而不是$(document).ready(). 如果document在 DOM 准备好时触发，window则在所有元素都准备好时触发。唯一的问题是，如果您有任何外部文件并且服务器不可用，您的脚本将不会触发。

于 2010-08-02T10:41:46.603 回答