圖像加載，打破某些腳本（Fancybox，Waypoint）？

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 */}) ...如果你的arent這樣做，那麼你要使用jQuery來從之前的DOM選擇的東西DOM已準備就緒。

其次，這可能是因爲您直接通過onload屬性來分配事件處理程序。嘗試添加一個事件處理程序，如下所示：

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

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