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

我看到的只有两件事......

首先，我看不到你的preloader包含在$(function(){ /* preloader here */})中......如果你不这样做，那么你就是在DOM准备好之前尝试使用jquery从DOM中选择东西。

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

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

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

图像onload，打破某些脚本（Fancybox，Waypoints）？

1 个答案: