Question

如何阻止jQuery $('body').load('something.php');更改任何 DOM，直到来自 something.php （包括图片，js）的所有内容完全< / strong> 已加载

- 假设一些实际内容是：

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更改）

Answer 1

使用.get代替并在成功回调中分配内容：

$.get('something.php', function(result) {
    $('body').html(result);
});

Answer 2

您可能需要自己解决一些实施细节，但这是一个粗略的解决方案：

请勿直接使用.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;

Demo

加载完所有图片后，使用frag将之前的$frag.appendTo('#container')附加到DOM。

Answer 3

你试过这个吗？

$(function(){$('body').load('something.php')});

编辑：我刚刚意识到你实际上是想在将物品放入体内之前等待物品加载。

以下是指向类似问题的三个链接。

Preloading images with jQuery

Is it possible to preload page contents with ajax/jquery technique?

Preloading images using PHP and jQuery - Comma seperated array?

你也可以将它们改编为脚本。

这也可能有用。

  $.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正在做的事情： Using documentFragment to parse HTML without sending HTTP requests

我不能确定所有浏览器是否都适用，或者只是在运行console.log时，但如果这种行为是通用的，那么它可能是预加载的好选择。

Answer 4

以下是在将HTML片段插入DOM之前加载相关图像的概念的快速证明：http://jsfiddle.net/B8B6u/5/

您可以使用onload处理程序预加载图像以触发迭代：

var images = $(frag).find('img'),
loader = $('<img/>');

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

这应该可行，因为每个图像都是在前一个图像加载完毕后加载的。

jQuery .load（）等到内容加载完毕

4 个答案: