動態替換div容器中的數據

在DIV容器內動態加載數據的最佳方式是什麼？動態替換div容器中的數據

比方說，我有一個頁面上的圖片數量。單擊圖片將在屏幕上打開一個DIV容器（不刷新頁面），其中包含該圖像的所有註釋。

此刻我發送一個AJAX請求來加載來自數據庫的註釋，並在另一個頁面中將它們回顯出來。然後，我使用jQuery將這些數據附加到DIV容器中。點擊另一個圖像將清除容器，新數據將通過新的AJAX請求加載。

在我看來，這可能不是最有效的方法，因爲如果用戶來回點擊頁面上的圖像，那麼每次都必須重新加載數據。

我看到Facebook每次選擇新圖像時都會更改URL。那麼他們可能會使用URL中的ID加載數據而不發送AJAX請求？

可能一旦加載數據並選擇了另一個圖像，最好是將舊圖像註釋隱藏在頁面上而不是放棄它們？所以如果圖像被再次點擊，它不會被要求重新加載它的數據？

來源

2015-10-04 user3857924

最好是一次加載所有數據並隱藏不必要的數據，並將其顯示在需要的事件上。 – sandeepsure

這是一個想法，你可以避免對同一圖像做頻繁/重複的ajax請求。

說你一個函數畫在你的DIV從服務器acepts的效應初探意見，如：

function displayComments(resp) { 
    //Do stuff 
}

而且讓我們假設一個Ajax調用圖像點擊如下所示。

//We're probably better of using the wrapper (class/ID) of images to 
//delegate events since setting/unsetting data may cause problems 
//if we'd used bind on images directly 
$("imagesContainerSelector").on("click", "img", function() { 

    var $this = $(this); 

    //See if comments have already been fetched previously. 
    //If yes, we'd have stored them as that image's data and 
    //we'd now simply use that data to display the comments. 
    if ($this.data("comments")) { 

     displayComments($this.data("comments")); 
    } else { 
     //We've not fetched comments for this image yet, so, fetch it 
     $.ajax({ 
      url: '...', 
      data: '...' 
      //more options 
     }).done(function(data) { 
      //When done, display comments 
      displayComments(data); 
      //Set the resp as data for later use 
      $this.data("comments", data); 
     }); 
    } 
});

來源

2015-10-04 10:01:14 lshettyl

謝謝，看起來像一個很好的方法。你將如何存儲傳入的數據？ 2維數組？ data（）函數的外觀如何？ – user3857924

存儲來自服務器的數據或任何想要存儲的數據。 ['.data（）']（https://api.jquery.com/data/）是一種內置jQuery方法來存儲任意數據。 – lshettyl

謝謝你。 .data（）函數必須附加到div元素？它實質上將我的整個評論數據存儲在該元素的「data-x」屬性中，而這在DOM上不可見？ – user3857924

如果您在某個div內重新指定了< img> -Tag，那麼在完成此操作後圖片就會被加載。如果您指定相同的圖片兩次或更多次，圖像已經在大多數瀏覽器的緩存中。那麼你可以做點像

$（'＃divid'）。html（'< img src =「...」>'）;

如果你想預載你的照片，我會把一些圖像放在一些非常小的一個div在某處。如果您將圖片放入隱藏的容器中，某些瀏覽器將無法預加載它們。

如果您將圖片存儲到某個數據庫或內存緩存中，請使用緩存標題。你可以編程一些outputpicture.php？id = 12345。在這種情況下，像

header('Content-Type: '.get_img_type($data)); 
header('Content-Length: '.strlen($data)); 
header("Pragma: public"); 
$expires = 60*60*24*14; 
header("Cache-Control: maxage=".$expires); 
header("Last-Modified: Mon, 26 Jul 1984 05:00:00 GMT"); 
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');

可以幫助很多。

來源

2015-10-04 09:07:56 Nibbels

您可以在javascript對象中添加您的獲取地址，並且每次發出ajax請求時都會將加載的內容映射到它。
然後，當用戶點擊圖片，而不是發送一個Ajax請求，首先檢查是否有對象中的請求從那裏加載它，如果你沒有在對象中的地址，那麼你可以繼續併發送一個ajax請求並將其結果保存到我提到的對象中。

來源

2015-10-04 09:50:40 FazeL

動態替換div容器中的數據

回答

相關問題