Home/ Questions/Q 6053003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:59:27+00:00

$(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({

  • 0
$(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
        });
    });
});

as you can see, im trying to do give a loader then when if all of my image loaded it will show the images. i think i get it wrong here. it only shows the loader

edit* my progress

<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
        });
    });
});

Thanks for looking in

Adam Ramadhan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You replaced the content of the element represented by .previewnetcoid with the loader, so the original content is gone. Thus, there’s nothing to cycle.

    Also, this isn’t even done until the page has already been completely loaded ($(document).ready()), so you’re effectively waiting until the page is completely rendered to show a loading animation. That’s obviously not right.

    You should place the loading animation HTML in the actual document, and use CSS to make it cover and hide the page (positioned absolutely, with 100% width and height, and a background). Then, in your javascript have it hidden on page load.

    Alternatively, you should probably write the loading HTML with JavaScript:

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

    Otherwise, if a user has JavaScript disabled, they’ll get the loading image, but it will never be removed.

    EDIT: (providing example)

    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();
});
    • 0