1

私たちのサイトwww.mydubaitrip.comには、ブラウザの幅に基づいて背景画像のサイズを変更するスクリプトがあります。私の問題は、Ctrl+F5を押しようとしたり、ホテルのページに移動してホームページに戻ったりすると、背景画像のサイズが正しく変更されず、レイアウトが乱雑に見えることです。しかし、F5もう一度押すと、それに応じて調整されます。何が問題なのかわかりません。

これが私が使用したスクリプトです。

    var minWidth = 1024;
var minHeight = 844;
var winRatio = new Array();
var imgReady = new Array();
var orientation = 90;
var debounceId;

var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {
    var minWidth = 980;
}

var readyToRotate = false;
var readyToResize = true;

var miniContentWrapperHeight = 444;

// BACKGROUND TRANSITION 
var theTimer;
var currBanner = -1;
var totalBanner = 0;
var timeWaiting = parseInt(500);
var timeTextTransIn = parseInt(1000);
var timeTextTransOut = parseInt(1000);
var timeTransCross = parseInt(2000);
var timeTransInit = parseInt(0);
var timeTransInterval = parseInt(7000);

var transitioning = false;

$("#homePageMainPanel").css({ "backgroundColor": "black" });

var hybridMode = true;
if (($.browser.mozilla && $.browser.version == "5.0") ||
    $.browser.msie && $.browser.version == "9.0") {
    //hybridMode = false;
}

//$("html").css({ "overflow": "hidden" });


function updateOrientation() {

    // scroll and hide address bar for iPhone landscape
    setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);

    if (window.orientation != undefined)
        orientation = Math.abs(window.orientation);

    resizeBackground();
}

$(window).load(function() {

    resizeBackground();

    if (!($.browser.msie && $.browser.version == "6.0")) {
        var lang = $('meta[name="language"]').attr("content");
        if ((lang == "ar") || (lang == "ir")) {
            $(".carouselShadow").css('background', 'url(/media/images/fg_ar_text_bg.png) no-repeat');
        }
        else {
            $(".carouselShadow").css('background', 'url(/media/images/fg_text_bg.png) no-repeat');
        }
    }
});

$(document).ready(function() {

    if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
        $("#carousel").append("<img src=\"" + BackgroundInfo[0].Src + "\" alt=\"" + BackgroundInfo[0].Alt + "\" />");
    }

    if ($(window).height() > $(document).height() - $("#bottomLayer").height()) {
        $("#bottomLayer").css({ 'position': 'absolute', "top": parseInt($(window).height() - $("#bottomLayer").height()) });
        $("#carousel img").height($(window).height() - $("#bottomLayer").height());
        //alert($("#bottomLayer").offset().bottom);
        $(".bookPanel").css({ 'position': 'relative', "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
        $(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });

        setTimeout(function() {
            $("#bottomLayer").css({ "position": "relative", "top": parseInt($(window).height() - $("#bottomLayer").height()) });
        }, 500);

        setTimeout(function() {
        $(".bookPanel").css({ "position": "relative", "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
        }, 500);

        setTimeout(function() {
        $(".carouselShadow").css({ "position": "relative", "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });
        }, 500);

    }

    //in case the navigation height is longer than prefixed minheight, adjust minheight=navigation height
    var homepageHeight = $("#homePageMainPanel").height() + $("#bottomLayer").height();
    if (homepageHeight > minHeight)
        minHeight = homepageHeight;


    //this is only for mobile safari on ipad/iphone
    window.onorientationchange = function() {
        window.scrollTo(0, 1);  // to prevent jumpy and blinky page transitions
        updateOrientation();
    }

    $(window)
        .resize(function() {
            if (readyToResize) {
                clearTimeout(debounceId);
                debounceId = setTimeout(resizeEvent, 500);
            }
        })
        .load(function() {
            // scroll and hide address bar for iPhone landscape
            setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);
        });

    initRotateBanner();
});

var winWidth = $(window).width();
var winHeight = $(window).height();

var winNewWidth = -1;
var winNewHeight = -1;

function resizeEvent() {
    // JL: Hack to prevent IE 7,8 to have infinite loop when window.resize event
    winNewWidth = $(window).width();
    winNewHeight = $(window).height();
    if (winWidth != winNewWidth || winHeight != winNewHeight) {
        clearTimeout(debounceId);
        resizeBackground();
    }
    winWidth = winNewWidth;
    winHeight = winNewHeight;
}

function initRotateBanner() {

    $('#carousel img').eq(0).one('load', function() {
        if (readyToRotate = true) {
            if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
                $.each(BackgroundInfo, function(i, v) {
                    if (i > 0) {

                        $("#carousel").append("<img src=\"" + BackgroundInfo[i].Src + "\" alt=\"" + BackgroundInfo[i].Alt + "\" />");
                    }
                });
                initBackgroundImageReady();
            }
            imgReady[0] = true;
            window.setTimeout("rotateBanner('init')", timeTransInit);
        }
        //$('#background').children("img").show();
        //$('#background').children("img").css({ 'opacity': '1' });
        resizeBackground();

    }).each(function() {
        // $(this).load();
    });

    /// assign each background text accordingly
    var index = 0;
    $('.carouselContentContainer').each(function() {
        $(this).attr('id', 'text_box_' + index);
        index++;
    });
}

function initBackgroundImageReady() {
    $('#carousel').children("img").each(function() {
        //assign each background id accordingly
        $(this).attr('id', 'img_box_' + totalBanner);

        // flag correspondingly when bg images is loaded
        imgReady[totalBanner] = false;
        $(this).one('load', function(event) {
            var id = $(this).attr('id');
            var idArr = new Array();
            idArr = id.split('_');
            var index = idArr[idArr.length - 1];

            //console.log(index + "loaded");
            imgReady[index] = true;
            resizeBackground();
        });

        //$(this).load();
        totalBanner++;
    });
}

function resizeBackground() {

    readyToResize = false;
    $('html').css({ 'overflow': 'hidden' });
    $("#carousel").children("img").each(function() {

        var oriWidth = $(this).width('');
        var oriHeight = $(this).height('');

        var bgWidth = $(window).width();
        if (bgWidth < minWidth)
            bgWidth = minWidth;

        var bgHeight = bgWidth / oriWidth * oriHeight;
        if (oriHeight < bgWrapperHeight)
            bgWrapperHeight = oriHeight;

        $(this).css({ 'position': 'absolute', 'width': bgWidth, 'height': bgHeight });

    });

    //start with window height & width
    var bgWrapperHeight = $(window).height();
    var bgWrapperWidth = $(window).width();

    // if vertical scrollbar exists, accommodate the scrollbar width (16px)
    if ($.browser.webkit == true) {
        ////$("#log").prepend(document.body.scrollHeight + " : " + document.body.clientHeight + "<br />");
        if (document.body.scrollHeight < document.body.clientHeight)
            bgWrapperWidth = $(window).width() - 16;  // accomdate the scroll bar width (16px)
        else
            bgWrapperWidth = $(window).width();
    }
    else {
        ////$("#log").prepend($(document).height() + " : " + $(window).height() + "<br />");
        if ($(window).height() < $(document).height())
            bgWrapperWidth = $(window).width() - 17;  // 
        else
            bgWrapperWidth = $(window).width();
    }


    // for screen size > min height (hp-navigation) but < min background image size, adjust to fit without scroller
    if (bgWrapperHeight + $('#bottomLayer').height() > $(window).height()) {
        bgWrapperHeight = $(window).height() - $('#bottomLayer').height();
    }

    //wrapper height should not go lower than navigation height
    if (bgWrapperHeight < $('#bookPanel').height())
        bgWrapperHeight = $('#bookPanel').height();

    //wrapper width should not go lower than min width
    if (bgWrapperWidth < minWidth)
        bgWrapperWidth = minWidth;

    // set #hp-content-wrapper height
    $('#homePageMainPanel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
    $('#carousel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
    $('#bottomLayer').css({ 'width': bgWrapperWidth });

    $('html').css({ 'overflow': 'auto' });

    //TODO: better way to center align bg image!
    //var nn = 0;
    // vertically middle align background
    $("#carousel").children("img").each(function() {
        // IF document height (minus footer height) is more than background image, 
        //    Expand Background Image Vertically!
    if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
            var newHeight = $(document).height() - $('#bottomLayer').height();
            var newWidth = Math.round((newHeight / $(this).height()) * $(this).width());

            var offsetX = ((bgWrapperWidth - newWidth) / 2);
            $(this).css({ 'position': 'absolute', 'left': offsetX, 'width': newWidth, 'height': newHeight });
            // $("#log").prepend($(document).height() + " : " + $('#footer').height() + "<br />");
            // Reset back the image top position to 0;
            $(this).css({ 'position': 'absolute', 'top': 0 });
        }
        else { //TODO: figure out what contributes to offset??
            var newWidth = $(document).width();
            var newHeight = Math.round((newWidth / $(this).width()) * $(this).height());
            var offsetX = ((bgWrapperWidth - newWidth) / 2);
            // Reset back the image left position to 0;
            $(this).css({ 'position': 'absolute', 'left': 0, 'width': newWidth, 'height': newHeight });
            // $(this).css({ 'position': 'absolute', 'left': 0, 'width': '100%', 'height': '' });


            if (bgWrapperHeight > $('#bottomLayer').position().top) {
                var offsetY = ((bgWrapperHeight - $(this).height()) / 2);
                $(this).css({ 'top': offsetY });
            }
            else {
                var offsetY = (($('#bottomLayer').position().top - $(this).height()) / 2);
                $(this).css({ 'top': offsetY });
            }
        }
    });


    //$(".bookPanel").css({ 'position': 'absolute', "top": parseInt($("#carousel").height()) });
    $('#bottomLayer').css({ 'position': 'absolute', 'top': $("#carousel").height() });
    $(".bookPanel").css({ "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
    $(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()) });
    //when having vertical scroll bar
    //known issue: does not work for IE screen onresize, only works onload
    if ($(window).height() != $(document).height()) {
        //$("#roomreservations").html($(window).width() + ":" + $(document).width() + ":" + minWidth);
        if ($(document).width() == minWidth && ($(window).width() != $(document).width())) {
            //show horizontal scrollbar (by default)
        }
        else {
            //otherwise hide horizontal scrollbar
            $('html').css({ 'overflow-x': 'hidden' });
        }
    }
    setTimeout('checkWidth(' + bgWrapperWidth + ')', 500);

    readyToResize = true;
}

function checkWidth(bgWrapperWidth) {
    $('#homePageMainPanel').width('100%');
    $('#bottomLayer').width('100%');
    $('#carousel').width($(document).width());

    $("#carousel").children("img").each(function() {
    if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
            // Resize the image height to $("#background") height, as the image should fill from the top till the footer
            $(this).css({ 'width': (($("#carousel").height() / $(this).height()) * $(this).width()), 'height': $("#carousel").height() });
        }
    });
}

function positionFooter() {
    return null;
    var footerPosition = $('#carousel').height() - $('#bottomLayer').height() + 1;
    if ($('#carousel').height() < minHeight) {
        footerPosition = minHeight - $('#carousel').height() + 1;
    }

    $('#carousel').css({ 'position': 'absolute', 'top': footerPosition });

    $('html').css({ 'overflow': 'auto' });

    $("#homePageMainPanel").css({ 'height': $('#carousel').height() });

}

var waitingTimeout;
function rotateBanner(param) {

    var nextBanner = 0;
    nextBanner = parseInt(currBanner) + 1;

    if (nextBanner >= totalBanner) { nextBanner = 0; }

    // wait until next bg image is fully loaded
    if (imgReady[nextBanner] != true) {
        waitingTimeout = window.setTimeout("rotateBanner('waiting')", timeWaiting);
        return false;
    }

    clearTimeout(waitingTimeout);



    transitionStart();

    // cross fade
    if (currBanner > -1) {

        if (hybridMode) {
            window.setTimeout("changeClass('quality','speed')", 500);
            window.setTimeout("changeClass('speed','quality')", 1500);
        }

        fadeBgImg('#text_box_' + String(currBanner), 0, 500);

        window.setTimeout("fadeBgImg('#img_box_" + String(currBanner) + "',0," + 1000 + ")", 500);
        window.setTimeout("fadeBgImg('#img_box_" + String(nextBanner) + "',1," + 1000 + ")", 500);
        window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1500);

        window.setTimeout("transitionComplete()", 2500);

    }
    else {

        if (hybridMode) {
            changeClass('quality', 'speed');
            window.setTimeout("changeClass('speed','quality')", 1000);
        }
        fadeBgImg("#img_box_" + String(nextBanner), 1, 1000);
        window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1000);

        window.setTimeout("showShadow()", 1000);

        window.setTimeout("transitionComplete()", 2000);
    }
    currBanner = nextBanner;

}

function nextPaging(nextBanner) {
    $('#carousel #paging ul li').each(function() {
        if ($(this).attr('id') == 'paging_item_' + nextBanner) {
            $(this).addClass("active");
        }
        else {
            $(this).removeClass("active");
        }
    });
}

function changeClass(from, to) {
    $("#carousel").removeClass(from).addClass(to);
}

function fadeBgImg(id, inout, duration, triggerTimer) {
    $(id).stop(true, true);


    if (inout == 1) {
        $(id).fadeIn(duration);
    }
    else {
        $(id).fadeOut(duration);
    }

    //$(id).animate({ 'opacity': inout }, duration);
    if (triggerTimer == true) {
        window.clearTimeout(theTimer);
        if (totalBanner > 1) {
            theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
        }
    }
}

function transitionStart() {
    transitioning = true;
}

function transitionComplete() {
    transitioning = false;
}


function Timer(callback, delay) {

    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    this.resume = function() {
        start = new Date();
        timerId = window.setTimeout(callback, remaining);
    };

    this.resume();
}

var waitingTimeout2;
function onBlur() {
    //theTimer.pause();
    clearTimeout(waitingTimeout2);
    if (transitioning) {
        waitingTimeout2 = window.setTimeout("onBlur()", timeWaiting);
        return false;
    }
    window.clearTimeout(theTimer);
};

function onFocus() {
    //theTimer.resume();
    if (totalBanner > 1) {
        window.clearTimeout(theTimer);
        theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
    }
};

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
    readyToRotate = true;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
    readyToRotate = true;
}


function showShadow() {
    // Do not fade in shadow png IE8 and below
    if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
        $(".carouselShadow").delay(1000).show();
    }
    else {
        $(".carouselShadow").delay(1000).fadeIn();
    }
}
4

1 に答える 1

0

これを自分で作成したことは素晴らしいことですが、誰かがBackstretchに関するすべての問題をすでに解決しています。

于 2013-02-01T01:05:32.880 に答える