Изображение с предварительным загрузчиком при загрузке страницы

-1

Прошу прощения за очень незначительную вещь, но я чувствую себя немного беспомощным в этом вопросе. Я интегрировал предварительно загружать изображение на моей странице загрузки в очень простой способИзображение с предварительным загрузчиком при загрузке страницы

This is my Page link

HTML: (Div для загрузки Pre-загрузчика изображений)

<div class="se-pre-con"></div>

Jquery для запуска пре- погрузчик на странице груз

$(window).load(function() { 
     // Animate loader off screen 
     $(".se-pre-con").fadeOut(); 
    });

Немного стилизации. CSS

<style> 
.no-js #loader { display: none; } 
.js #loader { display: block; position: absolute; left: 100px; top: 0; } 
.se-pre-con { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
}

Проблема При загрузке страницы, он плещется до Pre-погрузчиком изображение один раз, а затем загружает после предварительного загрузчика изображения завершить эффект. Теоретически предварительный загрузчик должен отображаться перед загрузкой страницы. Надеюсь, кто-нибудь из вас сможет понять, где и что я сделал не так?

С уважением

источник

2015-05-27 Malik Mudassar

Расскажите изображение в CSS для отображения: нет; – Andrew

Спасибо @ Andrew за ответ так быстро, этот трюк действительно улучшил скорость загрузки страницы, но теперь я вообще не вижу предзагрузчика. Я разместил отображение: нет в классе .se-pre-con, который является div моего preloader. У меня есть еще один вопрос, если вы не поможете мне спросить, могу ли я показать тот же предварительный загрузчик на странице разгрузки, а не показывать при загрузке? –

Я думаю, что ваш HTML не очень хорошо отформатирован по ссылке вы предоставили:

Что бы я сделать, это убедиться, что страница HTML имеет структуру, подобную этой:

<html> 
    <head> 
    <script> 
    </script> 
    </head> 
    <body> 
     <div class="se-pre-con"></div> 
     <div class="site-content"></div> 
    </body> 
</html>

И внутри тег сценария имеют следующий метод:

$(window).load(function() { 
    $(".site-content").show(); //or fadeIn (what ever suits your needs) 
    $(".se-pre-con").fadeOut(); 
});

И в вашем CSS убедитесь, что вы установили

.site-content{  
    display: none; 
}

EDIT: (Чтобы ответить на ваш вопрос в comment- загрузчиком вызова в любое время)

я бы, вероятно, создать функцию, как это:

function toggleLoader(show){ 
    if(show == true){ 
     $(".se-pre-con").show(); 
     $(".site-content").fadeOut(); 
    } 
    else{ 
     $(".site-content").show(); 
     $(".se-pre-con").fadeOut(); 

    } 
}

Тогда на окна нагрузки вы могли бы назвать: toggleLoader (ложь),

Когда вы делаете запрос вызов: toggleLoader (истина),

И когда вы получите ответ вызов: toggleLoader (ложь).

источник

2015-05-27 09:50:22 EaziLuizi

Это имеет смысл @ EaziLuizi, а скорее показывает содержимое сайта до исчезновения предварительного загрузчика. Могу ли я показывать содержимое сайта после затухания после загрузки? –

Да, конечно, но я бы не использовал «fadeIn», а затем сразу показывал «шоу» – EaziLuizi

Спасибо, сэр, не обращайте на меня внимание на глупый вопрос, поскольку я медленный ученик. Могу ли я показывать изображение перед загрузкой на загрузку и выгрузку страницы. В настоящее время загрузка страницы отображает предварительный загрузчик, но когда запрос отправляется, как поиск новых учетных данных, требуется немного времени. Как я могу отобразить одно и то же изображение предварительного загрузчика сразу после отправки запроса –

содержание страницы не также отображается на странице загрузки вместе с погрузчиком элементом, так что нет какой-либо последовательности загрузки содержимого первой, но вы можете яслях на следующий код, Предположим, у вас есть два DIV, один pre-loader Див другой сайт container ДИВ

<body> 
    <div class="se-pre-con"></div> 
    <div id="container" style="display: none;"> 
     <!-- site content here --> 
    </div> 
</body>

в container ДИВ добавить display: none стиль, чтобы содержание сайта cant't мигает при загрузке страницы ..и при загрузке страницы, то вы можете show контейнер DIV см ниже код

$(window).load(function() { 
     // Animate loader off screen 
     $("#container").show(); 
     $(".se-pre-con").fadeOut(); 
    });

источник

2015-05-27 09:47:16 Girish

Только что прошел через ссылку на страницу и заметил, что display:none; был добавлен в .se-pre-con, как показано ниже. Уберите display:none;. Он работает приятель!

.se-pre-con { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
    background: url('http://www.rybena.com.br:8080/RybenaRepository/resource/img/loading.gif') center no-repeat #fff; 
 
    display: none; 
 
}

источник

2015-05-27 10:00:03 obuliraj

Да @ obuliraj. В первом ответе Андрей сказал мне, я неправильно понял его и поместил там. Я только что отредактировал это и нажал обновление на моем тестовом сервере. Мое другое проклятие по-прежнему одинаково для вас и Гириша и EaziLuizi, является ли этичным отображать предварительный загрузчик на странице разгрузки или я могу? Я имею в виду, что это выполняет задачу отображения предварительного загрузчика между загрузками страницы –

Изображение с предварительным загрузчиком при загрузке страницы

ответ

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