Jquery加載頁面

我試圖用jquery創建一個簡單的網站http://cone.hostei.com/index3.html。我只想使用函數將html頁面加載到div中。問題是，功能 - $('.preloader').hide()和（{ opacity : 1 }），火災之前，頁面及其圖像完全加載到一個div！我該如何解決它？Jquery加載頁面

$(window).load(function() { 
$('li a').click(function() { //event on click 
    var toLoad = $(this).attr('href'); //get href of a li element 
    $('.load-in').fadeOut('fast', loadContent); 
    $('.loader').show(); //show the loader 


    function loadContent() { 
     $('.load-in').css({ //set opacity 0.3 
      opacity: 0.3 
     }).load(toLoad, hideLoad); //load html page, then callback 
    }; 


    function hideLoad() { 
     $('.load-in').fadeIn('fast', 

     function() { //hide preloader and set opacity 1 
      $('.loader').fadeOut('fast'); 
      $('.load-in').animate({ 
       opacity: 1 
      }); 
     }); 
    }; 
    return false; 
}); 
});

來源

2013-04-10 user2264246

你的問題不清楚。沒有冒犯性，代碼在你的頁面上結構也很差。要破譯你的意圖是非常困難的。 – 2013-04-10 02:47:35

您需要將相關代碼複製到問題中，而不僅僅是指向網頁的鏈接 – 2013-04-10 02:58:43

您需要確保將您的jQuery代碼放入$（document）.ready（）處理程序中。這將確保您的代碼在頁面中的所有元素都被加載後運行。

見jQuery的API頁面：jQuery - .ready()

來源

2013-04-10 02:46:36 EthanTowne

它已經在他的頁面上的'window.load'中。看代碼。 – 2013-04-10 02:49:54

這根本不是問題。閱讀問題。 – plalx 2013-04-10 02:52:55

如果要檢測的圖像時，滿載，這樣你就不會看到被顯示的內容後，它們出現，你必須附加一個load事件處理程序包含在.load-in元素中的所有圖像上，並在所有圖像加載之前等待元素淡入淡出加載指示符。

像這樣的東西（根據您的站點代碼）：

function loadContent() { 
    var $loadIn = $('.load-in'); 

    $loadIn.css({ opacity : 0.3 }).load(toLoad , function() { 
     var $images = $('img', $loadIn), 
      imageCount = $images.length, 
      loadedCount = 0; 

      //wait on images before showing the content 
      $images.on('load', function() { 
       if (++loadedCount === imageCount) { 
        $images.off('load'); 
        hideLoad(); 
       } 
      }); 

      //make sure the content is still shown if images fails to load 
      //or are very slow to load 
      setTimeout(function() { 
       if (loadedCount !== imageCount) { 
        $images.off('load'); 
        hideLoad(); 
       } 
      }, 5000); 
    }); 
};

然而，這裏的一些事情你應該知道（從http://api.jquery.com/load-event/拍攝）：

負載事件

注意事項當與圖像一起使用一個常見的挑戰開發人員試圖解決使用.load（）快捷方式是執行一個功能時，一個圖像（或圖像集合）完全加載了。有幾個已知的注意事項，應注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的

它不正確的WebKit如果圖像的src設置爲相同的SRC作爲
之前進行發射
它不能正常泡了DOM樹

可以停止火已經生活在瀏覽器的緩存圖片

來源

2013-04-10 02:55:31 plalx

Thx對你的幫助很大，我是Jquery的新手，如果它不會給你帶來麻煩，你能告訴我怎麼做嗎？！ – user2264246 2013-04-10 03:21:23

@ user2264246，以及我只是在我的答案，但我沒有測試，但這就是想法。 – plalx 2013-04-10 03:23:20

@ user2264246，它工作嗎？ – plalx 2013-04-10 04:17:31

Jquery加載頁面

回答

相關問題