jquery - 图片加载，破坏某些脚本（Fancybox，Waypoints）？

Question

我正在尝试预加载一些背景图像，效果很好。但是当脚本完成并进入我的网站时，某些脚本/插件无法工作......（Waypoints，Fancybox）

但是所有其他的，如 Skrollr、jPlayer 等，都可以正常工作。

这是我的代码...

        function preloadTrees() {

            var treesIndex = '0';

            var trees = $('.tree > span.preload');

            nextTree();

            function nextTree() {

                console.log('Tree (' + treesIndex + ') of (' + trees.length + ')');

                if (treesIndex == trees.length) {

                    alert('All Images Loaded (' + trees.length + ')');

                    preloadUI();

                }
                else {

                    var currentTree = trees[treesIndex++];

                    if (currentTree) {

                        var currentTreeObj = $(currentTree);
                        var month = currentTreeObj.data('month');

                        console.log('Loading Tree - ' + month);

                        var treeImage = new Image();

                        if (isiPad) {
                            var path = '../assets/images/sprite-trees-' + month + '@2x.png';
                        }
                        else {
                            var path = '../assets/images/sprite-trees-' + month + '.png';
                        }

                        treeImage.src = path;

                        treeImage.onload = function() {

                            $('span.' + month).each(
                                function(){
                                    $(this).css('background-image', 'url(' + path + ')');                                       
                                }
                            );

                            console.log('Image Loaded ' + path);

                            nextTree();

                        }

                    }
                }

            }

        }

我将其缩小到的部分是：

treeImage.onload = function() {

如果我删除它，整个网站都会正常工作。

为什么会这样？

Answer 1

我只看到两件事...

首先，我没有看到您的预加载器包含在$(function(){ /* preloader here */})...如果您不这样做，那么您正在尝试使用 jquery 在 DOM 准备好之前从 DOM 中选择内容。

其次，这可能是因为您直接通过 onload 属性分配事件处理程序。尝试添加一个事件处理程序，而不是像：

// vanilla JS - note youll need to make this crossbrowser
treeImage.addEventListener('onload', function(){});

// or via jquery
$(treeImage).load(function(){});