我正在开发一个 django 食谱网站，其中一个页面目前正在使用隐藏的 div 进行设置，我相信它会大大降低网页速度。
让我进一步解释一下：
我有一个包含 6 个食谱的页面。这些配方中的每一个都是一个链接，当您单击该链接时，它会激活一个 jquery 函数，该函数将隐藏的 div 转换为一个 div，该 div 会在具有不透明黑色背景的内容容器上弹出内容。这样做的问题是所有 6 个 div 都隐藏在内容容器后面，我相信这会显着降低网站性能（特别是因为我还将加载评论，也许还有图片等）。
我想做的是仅在必要时使用 ajax 来获取信息，而不是加载所有内容。（包括评论和特定于食谱的所有信息）
也许我可以只有一个弹出 div 而不是 6 个弹出 div，并将相关的食谱内容加载到该 div 中。
我是 ajax 新手，想知道这将如何用 django 来实现。
这是模板：
<div id="recipe_cont">
{% for recipe in recipe_list %}
<div id="recipe">
<div id="button{{ forloop.counter }}"> //creates 6 buttons because my page is paginated 6 objects to a page
<h4>{{ recipe.name }}</h4>
<h5>{{ recipe.author }}</h5>
<h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
</div>
<h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a>
<a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6>
<div id="popupContact{{ forloop.counter }}" class="popup">// this is the information I want to use ajax to retrieve and place into the popup div
<a id="popupContactClose{{ forloop.counter }}" style="cursor:pointer;float:right;">x</a>
<h1>{{ recipe.name }}
</h1>
<h3>{{ recipe.author }}</h3>
<p id="contactArea">
Ingredients: {{ recipe.ingredients }}
<br/><br/>
Steps: {{ recipe.steps }}
</p>
<br/><br/><br/><br/>
<br/>
{% get_comment_form for recipe as form %}
<table>
<form action="{% comment_form_target %}" method="post">
{% csrf_token %}
{{ form }}
<tr>
<td colspan="2">
<input type="submit" name="submit" value="Post" />
<input type="submit" name="preview" value="Preview" />
</td>
</tr>
</form>
</table>
{% for comment in comment_list %}
<a name="c{{ comment.id }}">comment</a>
{% endfor %}
</div>
<div id="backgroundPopup">
</div>
</div>
{% endfor %}
</div>
这是相关的 jquery 代码：这段代码只是为了演示弹出 div 的工作原理——不要认为你真的需要看这个
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup($contact_selector){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
}).fadeIn("slow");
$contact_selector.fadeIn("fast");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup($contact_selector){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$contact_selector.fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup($contact_selector){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("body").height();
var popupWidth = $("body").width();
//centering
$contact_selector.css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button1").click(function(){
//centering with css
centerPopup($('#popupContact1'));
//load popup
loadPopup($('#popupContact1'));
});
$("#button2").click(function(){
//centering with css
centerPopup($('#popupContact2'));
//load popup
loadPopup($('#popupContact2'));
});
$("#button3").click(function(){
//centering with css
centerPopup($('#popupContact3'));
//load popup
loadPopup($('#popupContact3'));
});
$("#button4").click(function(){
//centering with css
centerPopup($('#popupContact4'));
//load popup
loadPopup($('#popupContact4'));
});
$("#button5").click(function(){
//centering with css
centerPopup($('#popupContact5'));
//load popup
loadPopup($('#popupContact5'));
});
$("#button6").click(function(){
//centering with css
centerPopup($('#popupContact6'));
//load popup
loadPopup($('#popupContact6'));
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose1").click(function(){
disablePopup($('#popupContact1'));
});
$("#popupContactClose2").click(function(){
disablePopup($('#popupContact2'));
});
$("#popupContactClose3").click(function(){
disablePopup($('#popupContact3'));
});
$("#popupContactClose4").click(function(){
disablePopup($('#popupContact4'));
});
$("#popupContactClose5").click(function(){
disablePopup($('#popupContact5'));
});
$("#popupContactClose6").click(function(){
disablePopup($('#popupContact6'));
});
$("#backgroundPopup").click(function(){
disablePopup($('.popup'));
});
//Press Escape event!
$(document).keyup(function(e) {
if( e.which == 27 ){
disablePopup($('.popup'));
}
});
});
最后是 css：这也有点无关紧要，但有助于展示 jquery 的工作原理
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact1, #popupContact2, #popupContact3, #popupContact4, #popupContact5, #popupContact6{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:400px;
width:420px;
background:#eee76f;
border:2px solid black;
z-index:2;
padding:12px;
font-size:13px;
border-radius: 15px;
}
.popup{
overflow:auto;
}
.show_hide{
float:left;
}
#popupContact1 h1, #popupContact2 h1, #popupContact3 h1, #popupContact4 h1, #popupContact5 h1, #popupContact6 h1{
text-align:left;
color:black;
font-size:22px;
font-weight:700;
border-bottom:1px dotted black;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose1, #popupContactClose2, #popupContactClose3,#popupContactClose4,#popupContactClose5,#popupContactClose6{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:black;
font-weight:700;
display:block;
cursor:pointer;
}
#button6,#button5,#button4,#button3,#button2,#button1 {
text-align:left;
cursor:pointer;
width:150px;
}
如果还有什么我应该包括的，请告诉我
谢谢你
零食鱼