以下是加载Disqus评论的JavaScript代码(默认/官方版本):
据我所见,该代码使用异步方式进行HTTP请求;但这不是重点。
问题在于,我需要对代码进行一些更改,以便在用户滚动到评论部分时仅加载评论,即按需加载。并且我有两种可行的方法可以实现。
(代码#2)
(CODE #3)
(代码#3)
(CODE #1)
<script type="text/javascript">
var disqus_shortname = 'paulund';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
据我所见,该代码使用异步方式进行HTTP请求;但这不是重点。
问题在于,我需要对代码进行一些更改,以便在用户滚动到评论部分时仅加载评论,即按需加载。并且我有两种可行的方法可以实现。
(代码#2)
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}, { offset: '100%', triggerOnce: true });
});
(CODE #3)
(代码#3)
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
}, { offset: '100%', triggerOnce: true });
});
问题:
除了明显的我现在使用jQuery之外,代码#1和#2以及#1和#3有什么区别吗?我可能做错了什么,但完全没有注意到吗?
为什么使用
$.noConflict();
启动代码#2和#3时不起作用?(毕竟我也在文档中发现了它。)
例如,这并没有做任何事情。(但在浏览器控制台中给出一个错误,"Uncaught TypeError: Cannot call method 'noConflict' of undefined."。)
$.noConflict();
jQuery(document).ready(function($){
$('#comments').waypoint(function () {
var disqus_shortname = 'paulund';
$.ajax({
type: "GET",
url: "http://" + disqus_shortname + ".disqus.com/embed.js",
dataType: "script",
cache: true
});
}, { offset: '100%', triggerOnce: true });
});
$({...})()
包装器 - 无论如何都不应该有$
,因为在页面加载后你不需要一个文档就绪处理程序,但是在另一个函数中包含整个内容时,也不需要#1版本中的匿名函数。(可以推测,#1中立即调用的匿名函数是为了将dsq
变量保持在全局范围之外。) - nnnnnn