0

我在 $(window).Load() 上淡入图像，它工作得很好，除了当你打开社交分享时，社交网络脚本有时会出现问题并且需要 10 多秒才能加载，这意味着图像没有在脚本加载之前不要淡入！

有没有办法让以下忽略社交脚本？

$(window).load(function() {
   images.fadeIn('slow');
});

正在加载的社交脚本是显示“分享”按钮所需的脚本，它们包括 Facebook、Twitter、Pinterest、StumbleUpon 和 Google+。就在几秒钟前，“pinterest”脚本被卡住了，加载它的代码确实有“异步”，所以我不知道我还能做什么？

4

1 回答 1

1

两种选择：

1 - 不要等待 window.load

您可以寻找图像加载，而不是等待窗口加载。例如，在 HTML 中的图像下方使用此脚本（或使用 jQuery 的ready事件）：

(function() {
    var imgs = $("selector for the images you care about");
    var done = false;

    // Hook both load and error events on the images    
    imgs.on("load error", check);

    // We may well have missed some, so do a proactive check
    check();

    function check() {
        var count = 0;
        if (!done) {
            imgs.each(function() {
                if (this.complete) {
                    ++count;
                }
            });
            if (count === imgs.length) {
                done = true;
                imgs.off("load error");
                // Do your effect
            }
        }
    }
})();

请注意，我们不依赖于获取load事件，因为它可能在我们挂钩之前已经触发。因此，如果我们错过了所有加载事件，我们会进行初始检查，然后在我们看到load或error从任何相关图像时再次检查。

2 - 异步加载相关脚本

与其在标记中使用标签，不如通过将元素附加到 DOM<script>来添加您不想等待的脚本。script以这种方式添加的脚本是异步加载的，不会阻塞window.load事件。

例如：

(function() {
    var scripts = [
        "http://example.com/some/script.js",
        "http://example.com/some/another_script.js",
        "http://example.com/some/script3.js"
    };
    var index, script;
    var parent = document.getElementsByTagName("script")[0].parentNode;

    for (index = 0; index < scripts.length; ++index) {
        script = document.createElement("script");
        script.src = scripts[index];
        parent.appendChild(script);
    }
})();
于 2013-10-14T10:00:22.700 回答