Question

$(document).ready(function() {
    $('.previewnetcoid').html('<img src="/www-static/assets/images/ajax-loader.gif" style="display: block; margin: 170px auto;">');
    $(window).load(function () {
        $('.previewnetcoid').show();
        $('.previewnetcoid').cycle({
            fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            speed:    2000,
            timeout:  6000
        });
    });
});

正如你所看到的，我试图给一个装载机然后当我加载所有图像时它会显示图像。我想我在这里弄错了。它只显示加载器

编辑*我的进度

<script type="text/javascript">
$(document).ready(function() {
    $('.previewnetcoid').hide();
    $(window).load(function () {
        $('#ajax-loader').hide();
        $('.previewnetcoid').show();
        $('.previewnetcoid').cycle({
            fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            speed:    2000,
            timeout:  6000
        });
    });
});

感谢您查看

Adam Ramadhan

Answer 1

您用加载器替换了.previewnetcoid表示的元素的内容，因此原始内容消失了。因此，没有什么可循环的。

此外，在页面已经完全加载（$(document).ready()）之前甚至都没有这样做，所以你有效地等待页面完全呈现以显示加载动画。那显然不对。

您应该将加载动画HTML放在实际文档中，并使用CSS使其覆盖并隐藏页面（绝对定位，100％宽度和高度，以及背景）。然后，在你的javascript中将它隐藏在页面加载中。

或者，您应该使用JavaScript编写加载HTML：

<script>document.write(...)</script>

否则，如果用户禁用了JavaScript，他们将获得加载图片，但永远不会删除。

编辑：（提供示例）

CSS

.loading {
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background:#000;
    z-index:9999;
}

HTML

<head>
    ...
    <link href="loading.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript">
        document.write('<div class="loading"><img src="loading.gif" alt="Loading..." /></div>');
    </script>
    ...

JS

$(document).ready(function(){
    $('.loading').hide();
});

如果图像加载jquery然后运行循环

1 个答案: