jQuery绑定，当所有本地域内容被加载时调用一个函数，但从该事件中排除远程社交链接

jQuery bind to call a function when all local domain content is loaded but exclude remote social links from that event

本文关键字：函数 一个 事件 程社交 链接 排除 调用 绑定 jQuery 加载      更新时间：2023-09-26

我有一个网站，当你点击我页面上的任何标签时，我让每个页面都很好地褪色。该网站运行非常顺利，只有本地域名的html页面。一旦我添加了facebook、google+、linkedin和twitter的社交分享小部件，我的页面现在有更多的延迟，因为窗口绑定事件等待整个页面加载。

是否有可能让绑定/加载事件等待一切从本地域加载或创建一个域列表来忽略我的div淡出效果方法下面称为fadeColors()。(我做的共享小部件是折叠关闭并显示立即这是好的，因为它只是一个按钮。我想分享小部件的内容，这是四个远程社交网址在自己的时间加载，但不妨碍我正在做的每个页面上的div称为"覆盖"的褪色效果。

<!-- HTML INDEX PAGE -->
<body>
<div id=overlay>&nbsp;</div>
<script type="text/javascript" src="js/custom.js"></script>
</body>
<!-- This Script is remotely included called custom.js  -->
$(document).ready(function() {  
var $colorsHTML =
'<div class="styleSwitcher">' +
'<a href="#" id="showHideSwitcher"><i class="icon-export"></i></a>' +
'<div id="switcherContent">' +
'<div style="margin-top:25px;height:115px;">';
if(!$('#onePage').length){
    $colorsHTML +=
    '<div class="layoutStyle">' +
    '<div style="padding-left:25px;"><script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-url="https://example.com"></script></div>' +
    '<div style="padding-left:25px;padding-bottom:12px" class="fb-share-button" data-href="https://example.com" data-layout="button"></div>' +
    '<div style="padding-left:25px;padding-bottom:2px"><g:plus action="share" annotation="none"></g:plus></div>' +
    '<div style="padding-left:25px;padding-bottom:12px"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="https://example.com">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?''http'':''https'';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+''://platform.twitter.com/widgets.js'';fjs.parentNode.insertBefore(js,fjs);}}(document, ''script'', ''twitter-wjs'');</script></div>' +
    '</div>';   
}
$("body").append($colorsHTML);  
});

/* ONLOAD and UNLOAD FADED EFFECTS */
// goto local or remote url 
function fadeExit(url) {
    window.location = url;
}
// trap any clicked a tag in the page to exit to the next page
$('a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
    fadeExit(url);
});
// fade the div overlay that is set above all content
function fadeColors(target) {
    $("#overlay").fadeTo(250, 0, function() {
        $("#overlay").css("display", "none");
    });
}
// Once the page is done loading call our function
$(window).bind("load", function() {
    fadeColors();
})

您有两个选择:

1)重组你的代码，类似于@restlessbit在评论中的建议。在custom.js中包含渐变设置代码和函数定义，但在ready处理程序的末尾调用fadeColors():

$("body").append($colorsHTML);
fadeColors();

，然后删除bind调用

// Once the page is done loading call our function
$(window).bind("load", function() {
    fadeColors();
})

2)如果这不能像预期的那样工作，重构你的共享链接设置代码到一个单独的脚本，并异步加载它。在ready处理程序中保留fadeColors()调用并设置共享小部件容器。(您提到小部件容器在启动时是折叠的，所以在容器内部加载时不应该有内容流的问题。

还有一些注意事项:

  1. 你的脚本在$colorsHTML的初始分配中包含不平衡的div标签。
  2. 考虑使用on而不是已弃用的bind。
  3. 您可能需要将a单击处理程序分配移动到document.ready处理程序中。目前，它被立即调用，这可能会阻止您的一些链接按照您的期望进行插装。或者，通过在更高级别的DOM上注册单击侦听器来使用委托事件处理，这样无论何时创建新的a元素，单击都将被拦截并正确处理。每种方法都有权衡，因此您的最佳选择将取决于您的用例和页面结构。
相关文章：