jQuery слайдер не загружает изображения с первого раза загружается сайт

Question

Я использую jquery load() для отображения всех документов на моем веб-сайте. Мой скрипт в файл index.html выглядит следующим образом

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#main-wrap').load("home.html"); 

    $('#home').click(function() { 
     $('#main-wrap').load("home.html"); 
     return false; 
    }); 

    $('#wilgoc').click(function() { 
     $('#main-wrap').load("wilgoc.html"); 
     return false; 
    }); 
etc... 

В home.html

$(document).ready(function() { 
//$(window).load(function() { 
    $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
return false; 
    }); 

по умолчанию для nivoslider есть (окно) .load, но она не работает, когда я загружаю home.html во второй раз ... Любые идеи? Спасибо.

Answer 1

страница была загружена динамически (#slider новый DOM-элемент), так что это не работает

$('#home').click(function(e) { 
    e.preventDefault(); 
    $('#main-wrap').load("home.html", function(){ 
     $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
    }); 
}); 

EDIT:

Снимите document.ready с вашего home.html и сохраните это внутри вашего индексного html-файла и вызовите плагин внутри функции обратного вызова каждый раз, когда вы загружаете home.html как folows (ваш index.html)

$(document).ready(function() { 

    $('#main-wrap').load("home.html", function(){ 
     $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
    }); 

    $('#home').click(function(e) { 
     e.preventDefault(); 
     $('#main-wrap').load("home.html", function(){ 
      $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
     }); 
    }); 
    ... 
    ... 
}); 

Убедитесь, что вы не загружаете еще один полный html-файл (с html. head e.t.c теги) внутри вашего div.

Вы можете попробовать это (замените каждую строку):

setTimeout(function(){ 
    $('#slider').nivoSlider({effect:'fade', animSpeed:800, pauseTime:5000}); 
}, 1000);