flash网站加载太慢,如何加进度条

Posted 2023-04-12

整个网站就是一个flash插到静态页面中，打开的时候由于flash过大，很久都打不开，页面程空白状，问：如何加入进度条，要自动跳转的，是用flash做还是代码做？？求高手解救啊，不会吝啬分数的

先用flash做一个加载界面，这个界面只包含加载背景和加载进度条，内容体积将后很小，发布后是一个swf。静态页面就先加载这个swf（因为小所以加载快），这个swf里写的是加载你网站的swf，这样子，加载进度什么的都有了，而且用户体验也不至于一直盯着白屏。对了，加载swf用Loader，加载进度需要派发ProgressEvent.PROGRESS事件。 参考技术A 用flas制作比较简单，用全代码作稍微复杂一点。但无论什么方法都离不开代码的。 参考技术B 将大的flash文件拆分为主flash文件和几个次flash文件，在主flash中设置几个按钮，当用户点按钮时才下载相应的次flash文件，进度条需要用到代码，可设置多个进度条。

网站顶部显示预加载进度条preload.js

网站加载的速度快的话，不会显示进度条加载时候的样式。

 支持性主流浏览器都支持，ie浏览器需要9以上9也支持。

使用方法

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/preload.js"></script>
<script type="text/javascript">
$.QianLoad.PageLoading({
    sleep: 50
});
</script>

/*
*/
$.QianLoad = {
    PageLoading: function(options) {
        var defaults = {
            delayTime: 500, //页面加载完成后，加载进度条淡出速度
            sleep: 0, //设置挂起,等于0时则无需挂起
            css: ‘<style>*{margin:0;}.load-wrap{width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff}#pre-load{position:fixed;top:0;height:2px;background:#2085c5;transition:opacity .5s linear}#pre-load span{position:absolute;width:150px;height:2px;-webkit-border-radius:100%;-webkit-box-shadow:#2085c5 1px 0 6px 1px;opacity:1;right:-10px;-webkit-animation:pulse 2s ease-out 0s infinite}@-webkit-keyframes pulse{30%{opacity:.6}60%{opacity:0}to{opacity:.6}}</style>‘
            //进度条样式位置可以自己修改
        }
        var options = $.extend(defaults, options);
        //在页面未加载完毕之前显示的loading Html自定义内容
        $(‘head‘).append(defaults.css);
        var _LoadingHtml = ‘<div class="load-wrap" style="width:100%;height:100%;position:absolute;top:0;left:0;background:#ffffff"><div id="pre-load">‘ + ‘<span></span>‘ + ‘</div></div>‘;
        //呈现loading效果
        $("body").append(_LoadingHtml);
        //监听页面加载状态
        document.onreadystatechange = PageLoaded;
        function PageLoaded() {
            var loadingMask = $(‘#pre-load‘);
            $({
                property: 0
            }).animate({
                property: 98
            }, {
                duration: 3000,
                step: function() {
                    var percentage = Math.round(this.property);
                    loadingMask.css(‘width‘, percentage + "%");
                    //页面加载后执行
                    if (document.readyState == "complete") {
                        loadingMask.css(‘width‘, 100 + "%");
                        setTimeout(function() {
                                loadingMask.animate({
                                        "opacity": 0
                                    },
                                    options.delayTime,
                                    function() {
                                        $(this).remove();
                                        $(".load-wrap").remove();
                                        console.log(‘Loading has been successful‘);
                                    });
                            },
                            options.sleep);
                    }
                }
            });
        }
    }
}