如何在显示之前填充加载的内容？

我在index.html，我ajax query.php并得到结果。现在如何在将block.html加载到content之前填充block.html，以便在没有颜色/大小信息的情况下不会显示文本？如何在显示之前填充加载的内容？

的index.html

<div id="content"><button id="button1" type="button">click</button></div>

block.html

You selected the color: <div id="color"></div>! 
You chose a size of: <div id="size"></div>!

query.php

$result = array('color' => 'blue', 'size' => '12'); 
echo json_encode($result);

来源

2013-10-25 Roger

为什么block.html自己的文件？ –

有多个步骤，当你点击一个按钮，它会加载block.html到内容中，当你点击另一个它会加载block2.html。 – Roger

你有一些数据和y你有一些HTML，你需要以合理的方式将它们合并在一起。你基本上在做client-side templating。

这里有一个基本的方法：

$.get需要，并转换为一个jQuery对象processBlock()
$.get你需要getDataFor($el)
更新＃1＃2 renderBlock($el, data)
将更新后的HTML插入到DOM中addToContent($el)

代码：

$.get("block.html", processBlock); 

// create a documentFragment to fill in later 
function processBlock(html) { 
    var $block = $(html); 
    getDataFor($block); 
} 

// get any needed data by querying for JSON 
function getDataFor($el) { 
    $.getJSON("query.php", function(data) { 
     renderBlock($el, data); 
    }); 
} 

// take the data and the element and 
function renderBlock($el, data) { 
    $el.find("#color").text(data.color); 
    $el.find("#size").text(data.size); 
    addToContent($el); 
} 

function addToContent($el) { 
    $el.appendTo($("#content")); 
}

在非jQuery的土地要创建一种叫做DocumentFragment的，它可以让你创建一个DOM你将其插入页面之前操纵一点点。

简单小提琴版本： http://jsfiddle.net/9kLzP/

来源

2013-10-25 20:45:01

如何在显示之前填充加载的内容？

回答

相关问题