jQuery .load（）等到内容加载完毕
如何防止jQuery $('body').load('something.php'); 从更改任何 DOM直到来自something.php （包括图像，js）的所有内容都完全 加载
– 让我们说一些实际的内容是：
Hello world
而something.php内容是：
image that loads for 10 seconds 20 js plugins
在触发.load（）函数之后，什么都不应该发生，直到图像js文件被完全加载， THEN立即改变内容。
可能会出现一些预加载器，但它不是问题的主题。
[编辑] – – – – – – – – – – – – – – – – – – – – – – – – ———————–
我的解决方案是css代码（css在dom构建之前始终加载），具有跨浏览器不透明度0。
.transparent{ -moz-opacity: 0.00; opacity: 0.00; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); filter:alpha(opacity=0); }
并且它通常但不总是防止内容的错误闪烁。 现在有可能以某种方式检测jQuery ajax加载内容并应用一些show timeout等等。 但实际上问题仍然存在。
现在为这个问题做一个更简单的例子：
如何在$（’body’）之后开始更改DOM。在点击激活.load（’something.php’）函数的链接后，加载（’something.php’）延迟3000ms？ （浏览器应立即开始下载，但必须稍后启动DOM更改）
改为使用.get并在成功回调中分配内容：
$.get('something.php', function(result) { $('body').html(result); });
您可能需要自己解决一些实施细节，但这是一个粗略的解决方案：
-
不要直接使用
.load()。 无法更改为等待加载所有图像。 -
使用
$.get()将HTML提取到变量中，让我们称之为frag。 -
使用
$(frag).find('img').each(fn)查找所有图像并将每个this.src转储到预加载器中。var images = [], $frag = $(frag), loaded = 0; function imageLoaded() { ++loaded; // reference images array here to keep it alive if (images.ready && loaded >= images.length) { // add $frag to the DOM $frag.appendTo('#container'); } } $frag.find('img').each(function() { var i = new Image(); i.onload = i.onerror = imageLoaded; i.src = this.src; images[images.length] = i; }); // signal that images contains all image objects that we wish to monitor images.ready = true;演示
-
加载所有图像后，使用
$frag.appendTo('#container')将早期的frag附加到DOM。
以下是在将HTML片段插入DOM之前加载相关图像的概念的快速certificate： http ： //jsfiddle.net/B8B6u/5/
您可以使用onload处理程序预加载图像以触发迭代：
var images = $(frag).find('img'), loader = $('![]()
'); function iterate(i, callback) { if (i > 0) { i--; loader.unbind("load"); loader.load(function() { iterate(i, callback); }); loader.attr('src', images[i].src); }else{ callback(); } } iterate(images.length,function(){ $('#container').html(frag); });
这应该工作，因为每个图像在前一个图像完成加载后加载。
你试过这个吗？
$(function(){$('body').load('something.php')});
编辑：我刚刚意识到你实际上是想要在它被放入体内之前等待它们加载。
以下是指向类似问题的三个链接。
使用jQuery预加载图像
是否可以使用ajax / jquery技术预加载页面内容？
使用PHP和jQuery预加载图像 – 逗号分隔数组？
你也可以将它们改编成脚本。
这可能也有效。
$.ajax({ 'url': 'content.php', 'dataType': 'text', 'success': function(data){ var docfrag = document.createDocumentFragment(); var tmp = document.createElement('div'), child; //get str from data here like: str data.str tmp.innerHTML = str; while(child = tmp.firstChild){ docfrag.appendChild(child); } $('body').append(docfrag); } });
这是Shadow Wizard建议的更长的方式，但它可能会起作用。 嗯。 没关系。 杰克的回答看起来最好。 我会等一会儿，如果没有人喜欢我的回答，我会删除它。
编辑：看起来附加到documentfragments可以执行http请求。 使用createDocumentFrament的任何脚本都可以从预加载中受益。
在这个问题中，他们不需要http请求，即使这是createDocumentFragment正在做的事情： 使用documentFragment解析HTML而不发送HTTP请求 。
我不能确定这是否适用于所有浏览器或仅在运行console.log时，但如果此行为是通用的，则它可能是预加载的好选项。