jQuery delay in firing function

Question

У меня есть следующий скрипт на моей странице, который является частью сценария «DynamicPage», и я добавил часть, чтобы вызвать функцию, чтобы запустить мой слайдер изображения. Здесь нужно решить проблему, которую я имел раньше. Он работает, за исключением задержки секунды секунды после загрузки страницы. Изображения ниже дают вам представление о том, что я имею в виду.

As the page loads

What it should look like/what it looks like after about half a second

Вот сценарий

$(function() { 

    var newHash  = "", 
     $mainContent = $("#main-content"), 
     $pageWrap = $("#page-wrap"), 
     baseHeight = 0, 
     sliderInit = true, 
     $el; 

    $pageWrap.height($pageWrap.height()); 
    baseHeight = $pageWrap.height() - $mainContent.height(); 

    $("navbar").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); return false; }); 

    $(window).bind('hashchange', function(){ 
     newHash = window.location.hash.substring(1); 
     if (newHash) { 
      $mainContent.find("#guts").slideUp(5, function() { 
       $mainContent.hide().load(newHash + " #guts", function() { 
        $mainContent.slideDown(5, function() { 
         $pageWrap.animate({height: baseHeight + $mainContent.height() + "px" }, function() { 
          $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000}); 
         }); 
        }); 
        $("navbar a").removeClass("current"); 
        $("navbar a[href='"+newHash+"']").addClass("current"); 
       }); 
      }); 
     }; 
    }); 
    $(window).trigger('hashchange'); 
}); 

Answer 1

Я предлагаю вам добавить накладку на страницу. Скажем, черно-белый фон, который лежит на верхней части страницы, скрывает все остальное. Теперь, когда ваша функция срабатывает, вытрите этот оверлей и удалите его.

$(function() { 

var newHash  = "", 
    $mainContent = $("#main-content"), 
    $pageWrap = $("#page-wrap"), 
    baseHeight = 0, 
    sliderInit = true, 
    $el; 
       . 
       . 
       . 

$("#MY_OVERLAY").hide('slow'); 
}); 

Answer 2

Вы пробовали использовать триггер слайдера после загрузки страницы?

$(document).ready(function() { 
    $(window).trigger('hashchange'); 
}); 

Answer 3

Вы выпускаете не проблему javaScript, а проблему Html/CSS.

Фактически, если бы вы загрузили свою веб-страницу без javaScript (древний, которого я знаю, но люди все еще используют XP с древними браузерами там), он будет застревать в ur "пример загрузки страницы".

Мое предложение состоит в том, чтобы иметь скрытый класс css, который вы применяете ко всем избыточным дополнительным динамическим элементам. Вещи, которые вы хотите скрывать без javaScript, или в вашем случае, дополнительные кадры изображения. Таким образом, вы не только предотвращаете неэффективный эффект, который вы видели, вы делаете сайт обратно совместимым. Важно, особенно если ваша целевая аудитория не может быть ИТ-специалистом.

.preLoadHide { 
    visibility:hidden; 
} 

После чего, когда (и если) загружается JavaScript, сделать следующее, так как вы используете JQuery [до или после применения эффекта изображения слайдов требует экспериментирования]

jQuery(".preLoadHide").removeClass(".preLoadHide"); 

---

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

$ (function() {... ваш код здесь ...});

В контексте вашего кода: это гарантирует, что javaScript выполняется после загрузки изображений, поскольку скрипт будет аварийно завершать/не выполнять/ничего не делать, ничего, когда ничего не загружается. Следовательно, ваша 0,5-секундная задержка.

[Поскольку ваша страница по-прежнему загружается, на самом деле большинство изображений постепенно загружаются в браузерах, когда они появляются впервые, они на самом деле неполные детали с более высоким разрешением, которые мы иногда просто не осознаем, res являются частью оптимизации]

Следовательно, с периодом загрузки сервера, не являющимся тем, что вы всегда контролируете, лучше всего предположить, что задержка всегда будет там. Следовательно, работайте с ней = P