我正在处理的网站正在冻结方向更改,该网站属于调整大小功能。经过大量的重写后,它可以在插件外移动resize事件。这导致了其他不需要的行为,因此它并不理想。
知道为什么会被卡住吗?我所知道的其他插件,比如Supersized,在没有挂断的情况下以类似的方式运行doc ready,load和resize。所以我知道可能有一些关于我是如何写它的细节导致它。
请求你的帮助!
测试地点: http://brantley.dhut.ch/
JavaScript的:
插入 -
(function( $ ){
$.fn.respond = function(callback) {
/* initialize function on window load and resize */
$(document).ready(function() {
dimensions();
});
$(window).resize(function() {
dimensions();
});
/* declare affected elements */
var pic = this
/* set image's height or width depending on the browser window's size */
function dimensions() {
return pic.each(function() {
/* declare variables */
var browserWidth = $(window).width();
var imgRatio = $(this).width() / $(this).height()
var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
var browserRatio = browserWidth / availableHeight
/* image sizing logic */
if (browserRatio >= imgRatio) {
if (browserWidth > 640) {
/* if the browser is landscape and bigger than mobile, set the image's height to fill the available space */
$(this).height(availableHeight).width('auto');
//$('body').css('background', 'blue');
} else {
/* it's mobile */
$(this).width(browserWidth - 40).height('auto');
//$('body').css('background', 'red');
}
} else {
/* if the browser is portrait, set the image's width to fill the page */
$(this).width(browserWidth - 40).height('auto');
//$('body').css('background', 'green');
}
/* horizontally center content */
$(this).css('margin-left', (browserWidth - $(this).width())/2);
});
};
callback();
};
})( jQuery );
执行 -
$(document).ready(function() {
/* run respond and hide the main images */
$('.z').respond(function() {
$('.z').hide();
});
});