Функция init() не определена при использовании easeljs

Я работаю над небольшим проектом для создания галереи изображений с помощью easeljs и jQuery, я очень новичок в обоих инструментах, и эта конкретная проблема заставила меня почесывать голову.Функция init() не определена при использовании easeljs

Мой HTML является очень простой, я просто хочу, чтобы получить функциональность прямо перед тем, как начать добавлять любые навороты:

<body onload="init();"> 
 
    <div style="margin-top:20px;" class="col-sm-8"> 
 
    <div class="embed-responsive embed-responsive-4by3"> 
 
     <canvas class="embed-responsive-item" id="slide-show" width="640" height="480"></canvas> 
 
    </div> 
 
    </div> 
 
</body>

Если я правильно понимаю, для того, чтобы установить новый этап и, по сути, заставить весь скрипт работать, мне нужно запустить функцию init() в начале моего скрипта.

$(document).ready(function(){ 
 
    //declare global variables 
 
    var data; 
 
    var stage; 
 
    var canvas; 
 
    var images = []; 
 
    var bitmaps = []; 
 
    var imageCount = 0; 
 
    var slideshowInterval = 3000; 
 

 
    //connect to feed.json 
 
    $.ajax({ 
 
     url: 'json/feed.json', 
 
     datatype: 'json', 
 
     type: 'get', 
 
     cache: false, 
 
     success: function(data) { 
 
      data = data; 
 
     } 
 
    }); 
 

 
    function init(){ 
 

 
     canvas = document.getElementById('slide-show'); 
 
     stage = new createjs.Stage(canvas); 
 

 
     $(data.feed).each(function(index, value) { 
 
      //populate the images array with content from feed.json 
 
      images[index] = new Image(); 
 
      images[index].src = data.feed[index].source; 
 
      images[index].onload = imageLoaded; 
 
     }); 
 
    } 
 

 
    function imageLoaded(){ 
 
     // go through all images and create bitmaps for them. 
 
     imageCount++; 
 
     if(imageCount >= images.length - 1){ 
 
     createBitmaps(); 
 
     } 
 
    } 
 

 
    function createBitmaps(){ 
 
     // create the bitmaps and add them to an array 
 
     $(images).each(function(index, value){ 
 
     bitmaps[index] = new createjs.Bitmap(images[index]); 
 
     }); 
 
    } 
 

 
    function createSlider(){ 
 

 
     bitmaps.x = 0; 
 
     bitmaps.y = 0; 
 
     stage.addChild(bitmaps); 
 

 
     setTimeout(slideshowInterval, slideImage(index)); 
 
    } 
 

 
    function slideImage(index){ 
 

 
     // handle the animation of the slide effect and update dom with image details. 
 
     $('#biscuit-name').html(data.feed[index].name); 
 
     $('#biscuit-info').html(data.feed[index].text); 
 
    } 
 
});

Пожалуйста, знайте, что это, конечно, не закончена, и некоторые из функций полуготовности. Я просто хотел немного отлаживать, когда работал над вещами, и на первом шаге ударил стену с помощью функции init, которая, по-видимому, не срабатывала по назначению.

источник

2016-03-06 pragmatic84

Основная проблема заключается в том, что <body onload="someFunction()"> будет искать someFunction, который будет определен в глобальной области видимости, то есть он выполняет window.someFunction().

Теперь вы init() не находитесь в глобальном масштабе. Он существует только внутри функции $(document).ready(function(){ ... }).

Таким образом, одно решение было бы добавить, что init функцию в глобальном масштабе, как это:

$(document).ready(function() { 
    // ... all your current definitions 
    window.init = init; 
});

Обратите внимание здесь на то, что init будет определен и добавлен к window после $(document).ready только Событие jQuery запускается. Но это не должно быть проблемой, так как $(document).ready обычно срабатывает раньше [1], чем событие onload, тем самым определяя init, прежде чем он вызывается в <body onload="init()">.

_{[1] $(document).ready срабатывает после того, как был загружен HTML-документ. onload - это встроенное событие DOM, которое должно быть запущено после того, как все содержимое было загружено (включая изображения и т. Д.).}

источник

2016-03-06 19:23:05 acdcjunior

Спасибо за это acdcjunior, одна из тех вещей, которая имеет смысл, как только кто-то показывает вам LOL! – pragmatic84

Функция init() не определена при использовании easeljs

ответ

Смежные вопросы