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>

我基本上使用Jquery元素的常规Javascript，所以这两种方法都会受到这个代码的尊重！谢谢！

Answer 1

手动触发resize事件看起来像是一个hack，我会在load或ready事件上调用该函数。

在窗口加载或文档就绪时调用windowResize()：

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

窗口加载和文档就绪之间的区别在于窗口加载在加载所有内容，资源和文档时触发。文档准备好被操作后，文档准备就绪。也就是说，如果您需要等待图像来计算画布上的尺寸，请使用窗口加载，否则只需准备好文档即可。

Answer 2

如果我理解你的问题，只需尝试在加载时触发resize事件。只需将它放在“脚本”块的末尾即可。

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

调整浏览器窗口时调整大小

2 个答案: