AJAX问题:如何在显示表格之前确保图像已加载?

时间:2009-09-08 06:30:08

标签: jquery html

我有一个网页,它使用jquery ajax从另一个静态页面获取表格标记并将其插入我的主页并显示它。我正在插入的表包含图像,并且在下载图像之前显示表格。因此,当我的代码显示表格时,您可以看到图像在下载时一次显示一个图像,而且非常难看。这是代码......

$(function()
{
  //AJAX LOAD, CREATE, AND INSERT PROJECTS MARKUP ONCE THE DOCUMENT IS READY 
  $('<div id="project_container" />').load('projects.htm #projects', function() 
  {
    $(this).hide().insertAfter('#header');
  });

  //CLICK EVENT FOR PROJECT LINK
  $('a#projects_link').click(function() 
  {      
    $('#project_container').stop(true, true).slideDown(500);       

    $.scrollTo( {top:'310px', left:'0px'}, 800);
  });   
});

有没有让jquery等到图像加载完之后再向下滑动并显示它?

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

在jQuery中,$(window).load()通常是在加载所有图像后运行一段代码的方式。只需为它提供执行咕噜声工作的功能:

$(window).load(
    function() {
        // weave your magic here.
    }
);

答案 1 :(得分:0)

我写了一个名为waitForImages的jQuery插件,当所有后代图像都已下载时,它会触发回调。

您可以使用它等待table中的所有图片下载...

$('table').waitForImages(function() {
  $(this).slideDown();
});