僅當用戶點擊項目時才加載內容。

我有一個博客的情況，我有共享按鈕。你點擊分享按鈕，然後一個盒子下降，顯示一些你可以分享帖子的地方。它看起來很酷很酷，但是因爲從各種服務器（Facebook，Twitter等）獲取大量數據，所以它花費的時間比我希望加載頁面的時間長，而且它在加載這些按鈕時遇到了麻煩。僅當用戶點擊項目時才加載內容。

如何（使用jQuery優先）我可以做到這一點，所以當用戶點擊分享按鈕時，而不是頁面加載時，Facebook等按鈕將加載，所以我可以減少頁面加載時間？

我一直想知道你如何做到這一點，但我從來沒有真的需要這樣做。

編輯：作爲參考，分享按鈕當你點擊它時會這樣做。這不是很複雜。

$('.share').click(function(e) { 

      $('.popup-share').fadeOut('100'); 

    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) { 
     $(this).parents('.share-is-care').children('.popup-share').fadeOut('100'); 
    } 
    else { 
     $(this).parents('.share-is-care').children('.popup-share').fadeIn('100'); 
    } 

}

來源

2011-07-29 Johnny

熟悉AJAX？ – sniper

你的這個代碼是什麼？ – AlexC

我害怕Javascript並不是我的特長，所以AJAX對我來說是一個完全陌生的話題。D：我已將共享代碼添加到主帖子中。它有點混亂，但它完美的作品。 – Johnny

如果要加載的動態內容，您可以添加內容到你的網頁動態使用AJAX功能，這裏是把一些代碼放入容器中的一個例子：

$('.share').click(function(e) { 
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) { 
     $(this).parents('.share-is-care').children('.popup-share').fadeOut('100'); 
    } else { 
     $.get('http://url_to_get.whatever', function (data) { 
      $(this).parents('.share-is-care').children('.popup-share').html(data).fadeIn('100'); 
     }); 
    } 
}

如果你只是想添加一些靜態代碼到一個元素上單擊（類似於加載外部網頁或某事的iframe），你可以這樣做：如果你想擁有的功能

$('.share').click(function(e) { 
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) { 
     $(this).parents('.share-is-care').children('.popup-share').fadeOut('100'); 
    } else { 
     $(this).parents('.share-is-care').children('.popup-share').html('<iframe src="http://www.foo.bar/script.bam"></iframe>').fadeIn('100'); 
    } 
}

來源

2011-07-29 20:33:55 Jasper

我解決了它！謝謝。 – Johnny

你描述，那麼你可能需要學習一點AJAX。

實際上，您目前正在嵌入一個提供類似系統（Facebook，Twitter，Google，...）的其他一方的腳本。這會加載頁面加載並使用各種按鈕來填充某些元素。現在，您需要延遲嵌入式腳本的執行，直到發生某些事件（用戶單擊共享按鈕）。

有一個詳細的博客文章，其中包含Facebook按鈕的示例代碼，但對於所有網站來說，這個過程基本相同。請參閱http://www.torbenleuschner.de/blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/（德語）

關鍵是要有一個空的元素來保存只在事件後點擊的按鈕（點擊您的案例）。例如：

<div class="popup-share"></div>

然後，您需要以當前使用的相同方式等待事件。但不是在加載的頁面上有按鈕創建腳本，我們會假定它們包含在buttons-fragment.html中。

// Delay function's execution until click and call it exactly once 
$('.share').one('click', function loadLikeButtons(e) { 
    // Get the empty element 
    var likeButtonContainer = $('.popup-share'); 
    // Fetch the code which contains the buttons (this is AJAX in the background) 
    $.get('your-server.com/buttons-fragment.html', {}, function fillInLikeButtons(data){ 
     // The code in this inner function runs as soon as the code for the buttons is available/was successfully loaded. 
     // The argument data contains the same HTML fragment that you are currently using to create the buttons 
     // Place the buttons (or button initialization scripts within the still empty button holder 
     likeButtonContainer.html(data); 
    }); 
});

注意對於性能更好的解決方案，省略了AJAX請求來獲取HTML片段。而是將其轉換爲頁面加載，但保留在JavaScript變量中。點擊共享按鈕，將其注入空的按鈕保持元素。我沒有把這個解決方案，因爲我認爲只有一個解決方案在你的問題的答案更容易理解。您可能想要打開關於如何通過頁面加載傳輸HTML片段的另一個問題，並在某個事件中注入它。

另外請注意，我從未真正測試過上面輸入的代碼。你可能會碰到錯別字。

作爲一個附註（不是答案的一部分）：在將按鈕放到您的網站以及與性能相關的東西時，請注意與隱私相關的問題。讓我們假設創建類似於下面的代碼的按鈕：

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<fb:like layout="box_count" show_faces="false" width="55" font="arial"></fb:like>

只要瀏覽器遇到的片段，它會從Facebook加載腳本。在這樣做的同時，您的頁面地址也會被傳送，並可能從Facebook設置Cookie。因此，如果有人仍然登錄Facebook，只要您的網站加載完畢，Facebook就能夠跟蹤他/她訪問您的網站。通過上面的回答，只會在點擊共享按鈕時發生（因爲這會導致加載外部腳本）。

來源

2011-07-29 21:11:56

僅當用戶點擊項目時才加載內容。

回答

相關問題