在调用ajax启动一项长期运行的任务之前,我需要完全渲染一个屏幕。即在加载需要10秒钟以上的报告(取决于Web服务)的报告之前,先加载布局。
我可以通过在页面上添加一个单独的脚本并在加载该脚本时调用Ajax来做到这一点,但这是最好的设计吗?例如。
_myreport.js:
$( document ).ready(function() {
var report = {
load: function() {
//test for report-container and run Ajax load if it exists
}
}
report.load();
});
我可能有几个页面,而我不特别喜欢针对多个不同页面的多个脚本。或者,当可能需要或可能不需要Ajax调用(并且容器可能存在或可能不存在)时,我可能想在多个页面上重用脚本。我可以在运行Ajax之前检查容器是否存在,但是对我来说这并不是一个好的设计。我想在需要时调用它,而不是在每次页面加载时都调用它,然后通过现有容器测试它是否适用。
我尝试在容器后的正文中对函数进行小的调用,但这会导致错误,因为尚未定义
report.load()
函数:template.phtml
<div id='report-container'></div>
<script>
$( document ).ready(function() {
report.load();
});
</script>
我可以在多个应用程序中重复使用的通用/标准和简洁方法是什么?
最佳答案
还没有定义report.load,因为它在$(document).ready中变形。
您正在尝试在报告容器加载之后但在整个DOM之前调用它。
如果在$(document).ready之外声明ajax加载函数,它将可用。
与对它的调用相同,您在div加载后正在运行脚本,但是因为它被包装在$ .ready中,所以它不会立即执行,而是等待其余部分加载...
这样的事情应该工作
// not wrapped in $( document ).ready
var report = {
load: function() {
// not sure if you need to test for container, this function is called after it loads
//run Ajax
}
}
<div id='report-container'></div>
<script>
// not wrapped in $( document ).ready
report.load();
</script>
关于javascript - 在初始页面加载时通过Ajax加载内容的设计模式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26170263/