0

我已经知道如何为加载页面执行“启动屏幕 div”,只需等到所有内容都加载完毕,然后隐藏 div 或将其移出屏幕。

例如

索引.html

<div id="loading-Div">

        <div id="bear-Logo">

            <div id="target">
                <div id="target2">
                    <div id="bearloop"></div>
                </div>
            </div>

        </div>

    </div>

加载.css

Just a class called 'fallback' to move the absolute-ly positioned div offscreen.

加载.js

$(window).load(function(){

    $( '#loading-Div' ).addClass( 'fallback' );

});

上面是一个“正在加载启动画面 Div”的相当粗略的例子,我不知道还能怎么称呼它,并且.css在标签末尾之前使用<head>..js<body>

如果您单击链接并希望在页面加载时显示 div,这可以正常工作,但我希望在单击链接的第二次显示 div,直到加载目标页面。

工作流程:

http://i.imgur.com/dIOZSMS.jpg


关键点:

我觉得这只能通过浏览器插件实现,因为:

  1. 该链接不是另一个 div 的锚点。例如url#div -> url#div2
  2. 基于上述情况,鉴于链接指向另一个.html页面,当前显示的内容将...根据页面的自然显示方式停止。

注意:

  1. 这是严格的站点内。
  2. 我不关心IE。
  3. 这不是家庭作业,也不是针对客户的。我正在学习 Web 开发,并认为这本身就是一个很酷的页面转换,并且无法弄清楚如何很好地做到这一点。

我宁愿没有动画和回调来显示 div 的传出链接,然后传入链接以将 div 显示为伪造的连贯动画,主要是因为它不会连贯,除非第二页的下载是瞬时的并且因为,即使是前者,太多的代码和因此的文件大小会进入一个连贯的动画,无论 div 要显示什么。

有什么想法吗?我对此感到非常困惑。

4

1 回答 1

1

由于您的 Javascript 位于底部,因此它将在页面之后异步加载。

索引.html

我不明白你为什么以这种方式嵌套 DIV。页面会加载到 logo 元素中吗?

加载.css

将 div 移出屏幕,它是动画的一部分吗?

$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);

加载.js

如果要在单击链接后显示元素,只需不使用 window.load 函数即可。

http://jsfiddle.net/Etd2D/

于 2013-07-21T09:36:41.603 回答