Изменение размера при обнаружении окна браузера

Question

Эй, все очень новые для всей сцены JS и JQuery и нуждаются в небольшой помощи. Пробег через несколько поисков, но я не смог найти решение или не заметил его (или даже внедрил его неправильно).

Я создал сайт, используя CreateJS, и мне удалось получить изменение размера, очень хорошо (используя немного JQuery, который я нашел здесь). Тем не менее, код ТОЛЬКО работает при изменении размера, а не при загрузке окна браузера в минимизированном состоянии (в основном загружает весь холст, как если бы он был полноэкранным, отключая сайт).

Я пытаюсь сделать этот сайт автоматически видимым с любого разрешения и мобильных устройств. Вот код, с которым я работаю, какое-то направление было бы здорово!

<script> 
var canvas, stage, exportRoot; 



function init() { 
canvas = document.getElementById("canvas"); 
images = images||{}; 

var manifest = [ 
    {src:"images/Bitmap1.png", id:"Bitmap1"}, 
    {src:"images/Bitmap2.png", id:"Bitmap2"}, 
    {src:"images/Bitmap3.png", id:"Bitmap3"}, 
    {src:"images/Bitmap4.png", id:"Bitmap4"}, 
    {src:"images/facebook.png", id:"facebook"}, 
    {src:"images/mainbg.jpg", id:"mainbg"}, 
    {src:"images/mainbglarge.jpg", id:"mainbglarge"} 
]; 

var loader = new createjs.LoadQueue(false); 
loader.addEventListener("fileload", handleFileLoad); 
loader.addEventListener("complete", handleComplete); 
loader.loadManifest(manifest); 
} 


//resize jquery 
(function($){ 
    $(window).resize(function(){ 
    windowResize();      
    });   
})(jQuery); 

function windowResize(){ 
    stage.canvas.width = window.innerWidth; 
    stage.canvas.height = window.innerHeight;  
    var test = (window.innerWidth/1680)*1; 
    exportRoot.scaleX = exportRoot.scaleY = test; 
} 

function handleFileLoad(evt) { 
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; } 
} 

function handleComplete() { 
    exportRoot = new lib.strikersite_html5Resize(); 

    stage = new createjs.Stage(canvas); 
    stage.addChild(exportRoot); 
    stage.update(); 
    stage.enableMouseOver(); 

    createjs.Ticker.setFPS(12); 
    createjs.Ticker.addEventListener("tick", stage); 
} 
</script> 

Я в основном с помощью регулярного Javascript с элементами Jquery, поэтому оба подхода будет оценен с этим кодом в виде! Благодаря!

Answer 1

Если я правильно понял вашу проблему, попробуйте вызвать событие изменения размера при загрузке. Просто поставьте его в конце блока «script».

$(function() { 
    $(window).trigger('resize'); 
}); 

Answer 2

Чтобы вручную запустить событие изменения размера, похоже на хак, я бы назвал функцию на загрузочном или готовом событии.

Вызов windowResize() на окне нагрузки или документ готов:

$(window).load(windowResize()); 

Разница между окном нагрузки и документ готов, что это окно нагрузки срабатывает, когда все было загружено, активы и документы. документ готов к пожару, как только документ будет готов к манипулированию. Тем не менее, используйте загрузку окна, если вам нужно дождаться, когда изображения будут вычисляться на холсте, в противном случае будет готов только готовый документ.