0

背景画像をプリロードしようとしていますが、うまくいきます。しかし、スクリプトが終了して自分のサイトに入ると、特定のスクリプト/プラグインが機能しません... (ウェイポイント、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() {

これを削除すると、サイト全体が機能します。

これはなぜでしょうか？

4

1 に答える 1

0

見えるのは2つだけ…

最初に、プリローダーがラップされているのがわかり$(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(){});
于 2013-03-23T21:50:56.240 に答える