ajax – 在写入页面之前检查图像是否已加载

在我认为这个项目完成之后，我遇到了一些我刚刚发现的问题。 它在我的本地服务器上工作得很好但是当我实时推送代码时，图像可能需要半秒才能正确加载，导致在加载图像上弹出一个小页面缩略图。 哎呀

alt text http://img815.imageshack.us/img815/985/loading.jpg

那么发生了什么？ 首先，一个函数在window.load上运行，它创建了大量的列表项，加载gif作为bg图像。

然后，此函数将标记弹出到第一个列表项中，其中onload调用第二个函数

第二个函数循环遍历XML文件，并将xml中的URL包装在标记中，并将其放入下一个空LI 。 这就是问题所在。 目前它在实际加载之前将放入List项。

我的代码：

 $(window).load(function() { txt=""; for(d=0;d<100;d++) { txt=txt + "
"; } document.getElementById('page-wrap').innerHTML=txt; document.getElementById('loading0').innerHTML=""; }); function loadImages(i){ i++ $.ajax ({ type: "GET", url: "sites.xml", dataType: "xml", async: "true", success: function(xml) { var img = $(xml).find('image[id=' + i + ']'), id = img.attr('id'), url = img.find('url').text(); $('#loading'+i).html('').hide(); $('#loading'+i).fadeIn(); } }); } 

我有一种感觉，这可能是非常棘手的实现我如何设置它，我有一种感觉，我可能需要创建一个img对象，并等待加载???

一旦页面被缓存，加载显然工作正常，但它首先加载时有点痛苦，所以我需要解决这个问题。 任何建议欢迎:)谢谢

Answer 1

在我看来，你正在苦苦思索。 有时解决方案是改变思维方式。 这完全取决于你。 我最喜欢的相关书籍之一。

我的建议是有类似下面的代码。 这不完全是你需要的……但……

小提琴上的演示

HTML：

 
 
  
 
​ 

CSS：

 html, body { padding: 10px; } .frame { z-index: 15; box-shadow: 0 0 10px gray; width: 350px; height: 350px; border: gray solid 1px; padding: 5px; background: #F0F9FF; } .loadingVitrin { z-index: 15; width: 350px; height: 350px; overflow: hidden; background: url("http://photoblog.toorajam.com/images/main/ajax-loader.gif") no-repeat center; } .loadingVitrin img { display: none; height: 350px; }​ 

Answer 2

 success: function(xml) { var img = $(xml).find('image[id=' + i + ']'), id = img.attr('id'), url = img.find('url').text(); // hide loading $('#loading'+i).hide(); $('').load(function() { // after image load $('#loading' + i).html(this); // append to loading $('#loading'+i).fadeIn(); // fadeIn loding }); } 

Answer 3

我有同样的问题。 试图得到答案我达成了你的问题。 无论如何我设法解决它的方式是放置：

 
  // place all the images in here that you eventually will need  

图像将以异步方式下载。 如果您已有图像，则不会再次下载，它将存储在浏览器的缓存中。 因此，如果用户在第一页中花费30秒，那么整个网站将会更快。 这取决于您网站的大小。 但这解决了使用小型网站时的问题。

我知道这不是一个真正的解决方案我会在你的问题上开始赏金。

Answer 4

感谢@thecodeparadox，我最终得到了：

 $.get("SomePage.aspx", "", function (r) { // r = response from server // place response in a wrapper var wrapper = $('
').html(r); // need to write the images somewhere in the document for the event onload to fire // loading content is a hidden div in my document. $(document).append(wrapper); //$("#LoadingContent").html("").append(wrapper); var counter = 0; var images = $(wrapper).find("img"); // get all the images from the response // attach the onload event to all images images.bind("load", function () { counter++; if (counter == images.size()) { // when all images are done loading // we are now save to place content // place custom code in here // executeSomeFuction(); $("#AjaxContent").html(r); $(document).remove(wrapper); } }); }, "text"); 

Answer 5

您只需使用Image（）对象预加载每个图像。 下面给出的脚本非常容易使用。 只需在“callbackFN（）”中写入您想要执行的任何代码，然后执行“preload_images（array_img）”。 更准确地说：

  var array_images = []; $.ajax ({ type: "GET", url: "sites.xml", dataType: "xml", async: "true", success: function(xml) { var img = $(xml).find('image[id=' + i + ']'), id = img.attr('id'), url = img.find('url').text(); array_images.push(url); } }); // Your callback function after loading: function callbackFN() { // Do whatever you want HERE // Pretty much this: for (var i = 1; i<=array_images.length; i++) { $('#loading'+i).html('').hide(); $('#loading'+i).fadeIn(); } } var array_obj = Array(); var iKnowItsDone = false; // Timer (IE BULLET PROOF) var ieCheckImgTimer; // Check if images are loaded function images_complete(obj) { var max = obj.length; var canGo = true; for (var i = 0; i 

Answer 6

试试这个：

 ThumbImage = document.createElement("img"); ThumbImage.src = URL; ThumbImage.onload = function(){ //function After Finished Load } 

Answer 7

您希望确保图像是由浏览器加载的，即在浏览器的缓存中加载，然后再将其添加到文档中：

 // create an image element $('') // add a load event handler first .load(function() { // append the image to the document after it is loaded $('#loading').append(this); }) // then assign the image src .attr('src', url); 

所以对于你的代码，我会这样做：

 $(window).load(function() { var txt=""; for(var d=0;d<100;d++) { txt=txt + "
"; } document.getElementById('page-wrap').innerHTML=txt; $('') .load(function() { $('#loading0').append(this); loadImages(0); }) .attr('src', 'images/0.jpg'); }); function loadImages(i){ i++ $.ajax ({ type: "GET", url: "sites.xml", dataType: "xml", async: "true", success: function(xml) { var img = $(xml).find('image[id=' + i + ']'), id = img.attr('id'), url = img.find('url').text(); $('') .load(function() { $('#loading' + i) .append(this) .hide() .fadeIn(); loadImages(i); }) .attr('src', url); } }); } 

也许这只是你的示例代码，但我不明白为什么不能同时加载0.jpg和sites.xml，或其他图像：

 $(window).load(function() { var buf = [], d; for (d = 0; d < 100; d++) { buf.push('
'); } $('#page-wrap').html(buf.join('')); $('') .load(function() { $('#loading0').append(this); }) .attr('src', 'images/0.jpg'); $.ajax({ type: 'GET', url: 'sites.xml', dataType: 'xml', async: true, success: function(xml) { var img, id, url, i; xml = $(xml); for (i = 1; i < 100; i++) { img = xml.find('image[id=' + i + ']'); id = img.attr('id'); url = img.find('url').text(); $('') .load(function() { $('#loading' + i) .append(this) .hide() .fadeIn(); }) .attr('src', url); } } }); });