Page Loader в html странице

Я пытаюсь показать изображение GIF загрузчика в разделе div этой страницы html. Но я не могу заставить его работать. Содержимое div скрыто, и изображение GIF исчезает.Page Loader в html странице

CSS:

.loader { 
    background-image: url(image/Preloader_8.gif); 
    background-repeat: no-repeat; 
    height:100px; 
    width:200px; 
}

JavaScript:

<script type="text/javascript"> 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
</script>

Html:

<body> 
    <div class="loader"> 
     Loading Image 
    </div> 
</body>

источник

2015-10-23 user3580570

С кодом ничего плохого. Вы уверены, что добавили ссылку на библиотеку jQuery? – Satpal

Вы запросили fadeOut класс загрузчика. Таким образом, он исчезает при загрузке. Что вы пытаетесь достичь? – Thamilan

Я использую приведенный выше код – user3580570

Добавьте этот код:

$(document).ready(function(){ 
    $(".loader").fadeOut("slow"); 
})

jsfiddle

источник

2015-10-23 06:36:53

В вашем коде класс загрузчика присваивается разделу div, поэтому, когда вы запускаете выпадение из страницы загрузчика, весь div, присвоенный классу fade, отсутствует. Поэтому лучше иметь внутренний div, которому назначен загрузчик. Это может помочь проверить

<body> 
 
    <div class="Image"> 
 
    <div class="loader"> 
 
     Loading Image 
 
    </div> 
 
    </div> 
 
</body>

Working example here

источник

2015-10-23 06:45:09 rakesh

Не работает также ... – user3580570

вы можете поделиться кодом? если вы видите загрузку gif, а затем div, содержащий исчезнувшие средства, используйте два div, как упоминалось ранее. else, если ваш загружаемый контент через ajax добавляет fadeout в обработчик succes – rakesh

Спасибо за комментарий. Я использую содержимое ajax в div. который будет извлекаться из базы данных. .. – user3580570

HTML

<body> 
     <div class="loader" style="display:none"> 
      Loading Image 
     </div> 
    </body>

$(window).load(function() { 
    $(".loader").fadeOut("slow"); 
})

Пожалуйста, добавьте следующий скрипт на верхней части веб-страницы

$(".loader").fadeIn();

Добавить загрузки DIV на вершине чуть выше сценария

источник

2015-10-23 06:57:19

Я думаю, что причина, почему ваш код:

$(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    })

не работает, потому что скрипт выполняется после полной загрузки документа.

Работает следующий код.

if (document.readyState == 'complete') { 
    $(".loader").fadeOut("slow"); 
} else { 
    $(window).load(function() { 
     $(".loader").fadeOut("slow"); 
    }) 
}

jsfiddle

источник

2015-10-23 06:57:24 kaze13

Вы используете AJAX для извлечения содержимого в сНе или просто .load функции?

В случае .load() Jquery события,

$(".loader").load("test.html", function() { 
    $(".loader").fadeOut("slow"); 
});

В случае запроса AJAX, вызовите функцию loader в случае успеха AJAX вызова.

function loader() { 
    $(".loader").fadeOut("slow"); 
});

источник

2015-10-23 07:14:02 Thamilan

Самый простой способ демонстрации погрузчика.GIF на веб-странице, как:

<div id="divloader" class="ShowLoader"> 
    <img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." /> 
</div>

CSS код

<style> 

.loaderIMG { 
    padding: 10px; 
    position: fixed; 
    top: 45%; 
    left: 45%; 
    width: 80px; 
} 

.HideLoader { 
    display: none; 
} 
</style>

JQuery код:

$(document).ready(function() { 
      $("#divloader").addClass("HideLoader"); 
     });

Сначала проверьте, что библиотека JQuery работает или нет, показывая предупреждения сбщ, а затем проверить, что путь изображения из элемента проверки браузера.

источник

2015-10-23 07:46:00

ответ

Смежные вопросы