Question

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

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

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

提前致谢

Answer 1

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

嗯，这是一个关于如何做到这一点的想法......

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();
});

资源

Answer 2

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

Answer 3

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

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

也许每张图片都在li范围内。您可以加载li具有loading类的页面。使用CSS的样式，以便它看起来像你想要的加载位。绑定到图片的load事件，并在回调中从父loading中删除li类。

Answer 4

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

jQuery显示为每个缩略图加载div直到加载

4 个答案: