Question

我正在尝试使用多个预加载器，这些预加载器只能在页面的特定区域加载，而不是加载整个页面，也可以在按钮单击等不同事件发生时加载。

我使用的代码是：

HTML

<style>
.preload div#preloader { 
     position: fixed; 
     left: 0; 
     top: 0; 
     z-index: 999; 
     width: 100%; 
     height: 100%; 
     overflow: visible; 
     background: #3C3D3F url('../images/loading.gif') no-repeat center center; 
 }
</style>
<div class="preload">
    <div id="preloader">
    </div>
</div>

JS

jQuery(document).ready(function($) {  
        $(window).load(function(){
                $('#preloader').fadeOut('slow',function(){
                    $(this).remove();
                });
        });

    });

Answer 1

您可以通过修改CSS来实现。

.preload div#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-color: #3C3D3F;
    background-repeat:no-repeat;
    background-position:center center;
}
.preload div#preloader.type1 {
    background-image:url("img-one.gif");
}
.preload div#preloader.type2 {
    background-image:url("img-two.gif");
}
.preload div#preloader.type3 {
    background-image:url("img-three.gif");
}

在这里，type1,type2,type3只是您可以根据事件添加/删除的不同类。你应该有一个类和事件的映射，以便你可以切换类。

如何在同一页面中使用多个预加载器进行不同的操作？

1 个答案: