Question

所以我有一个首先加载的页面。这个页面有一些jQuery，它会在图像和文本中淡入淡出，经过一段时间后会逐渐消失。然后页面将切换到下一页。

问题是，当它改变页面时，背景变白，因为它加载了新页面。我使用完全相同的背景图像顺便说一句。

所以我想要解决以下问题之一，因为他们可以想到所有这些。

选项1）有一个脚本可以在加载正文之前加载背景图像。唯一的问题是，我在body标签中设置背景。 <body onload="preLoader()" background="images/blue.png">

选项2）以某种方式将第一页合并到第二页，我认为这太难了。

仅为了解更多信息，请点击第一页的jQuery：

        var delay = 6500;
        $('#pre_title').hide(0).delay(500).fadeIn(2000);
        $('#loader_logo').hide(0).delay(500).fadeIn(2000);
        $('#pre_title').delay(500).fadeOut(2000);
        $('#loader_logo').delay(500).fadeOut(2000);
        setTimeout(function(){ window.location.href = "ls.php"; }, delay );

这里的jQuery在第二页的HTML中淡出。

    function preLoader() {
        $("html").hide(0).delay(500).fadeIn(1000);
    }

Answer 1

这是一个使用iframe入门的简单Vanilla JS概念验证实现。

    <html>

    <head>
        <style>
            body {background: rgba(255, 0, 0, .2);font-size:4em;}
        </style>
        <script>

        </script>
    </head>

    <body>
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
        this is page 0...this is page 0...this is page 0...<br />
    </body>

    </html>

<html>

<head>
    <style>
        body {background: rgba(0, 255, 0, .2);font-size:4em;}
    </style>
    <script>

    </script>
</head>

<body>
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
    this is page 1...this is page 1...this is page 1...<br />
</body>

</html>

    <html>

    <head>
        <style>
            body {background: rgba(0, 0, 255, .2);font-size:4em;}
        </style>
        <script>

        </script>
    </head>

    <body>
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
        this is page 2...this is page 2...this is page 2...<br />
    </body>

    </html>

<html>

<head>
    <style>
        body {
            background-image:url('http://stmed.net/sites/default/files/stone-wallpapers-28059-3653690.jpg');
            position:absolute;top:0,left:0;;height:100%;width:100%;
        }
        #pFrame0, #pFrame1 {position:absolute;top:20px,left:20px;opacity:1;height:100%;width:100%;}
        #pFrame1 {opacity:0;}
        form {position:absolute;top:5px;left:5px;z-index:3;}
    </style>
    <script>
        var dir = 'file:///home/richard/Documents/code/';
        var pageList = [
            'page0.html', 'page1.html', 'page2.html'
        ];

        function get(eId) {return document.getElementById(eId);};

        var nextPageIdx=0;
        function run() {
            nextPageIdx++
            nextPageIdx = (nextPageIdx == pageList.length)?0:nextPageIdx;
            loadPage(pageList[nextPageIdx]);
        };

        function loadPage(uri) {
            var current = (1 == 1*get('pFrame0').style.opacity)?'pFrame0':'pFrame1';
            var next = (1 == 1*get('pFrame0').style.opacity)?'pFrame1':'pFrame0';
            setTimeout("swapPages('" + uri + "','" + current + "','" + next + "'), crossFade('" + current + "', '" + next + "')");
        };

        function swapPages(uri, current, next) {
            get(current).src = get(next).src;
            get(current).style.opacity = 1;
            setTimeout("get('" + next + "').style.opacity = 0;", 50);
            setTimeout("get('" + next + "').src = '" + uri + "';", 100);
        };

        function crossFade(current, next, msecs) {
            if ('undefined' == typeof msecs) msecs = 5000;
            var delta = 100/msecs;
            get(current).style.opacity = 1;
            get(next).style.opacity = 0;
            for (var i = 0; i < msecs/100; i++) {
                setTimeout("get('" + current + "').style.opacity = (1*get('" + current + "').style.opacity) - " + delta, i*msecs/100);
                setTimeout("get('" + next + "').style.opacity = (1*get('" + next + "').style.opacity) + " + delta, i*msecs/100);
            }
            return msecs;
        };
    </script>
</head>

<body>
    <iframe id="pFrame0" src="file:///home/richard/Documents/code/page0.html"></iframe>
    <iframe id="pFrame1" src="file:///home/richard/Documents/code/page1.html"></iframe>
    <form>
        <input type="button" value="load next page" onclick="run();" />
    </form>
</body>

</html>

合并HTML页面

1 个答案: