動態JavaScript幻燈片

我有一個JavaScript幻燈片，它預先將圖像從MySQL數據庫中加載出來，然後一次顯示在HTML文檔的圖像標記中。簡而言之，它通過預加載圖像（如許多幻燈片教程顯示在網絡上）來實現此目的，但不是使用靜態圖像（即images/image1.jpg等），而是使用通過PHP提供的動態圖像（即getData.php？n = 1）getData.php腳本在服務器上運行，併爲預加載的每個圖像打開到數據庫的新連接。動態JavaScript幻燈片

有沒有辦法避免與數據庫建立如此多的連接，並且每個連接只對圖像數據庫使用LIMIT n，1進行單個查詢？

看來，如果我打算使用getData.php作爲image.src，那麼getData.php需要一次返回一個圖像！我真的想以10個塊爲單位獲取它們，然後將它們分配給客戶端的Image（）對象。我認爲這會更快，因爲當我在python中編寫客戶端應用程序來顯示圖片（當然在瀏覽器之外）時，10個左右的塊傳輸得更快（並且減少了mySQL服務器上的負載）。我可以用JavaScript和PHP來完成這項工作嗎？我在兩者之間使用XML嗎？如果我可以通過AJAX將二進制圖像數據轉換爲JavaScript，我可以用它做任何事情嗎？我錯過了JavaScript中的imagecreatefromstring()函數嗎？

我可以自己弄清楚確切的代碼，但我是網絡編程的新手，需要關於如何解決這個問題的提示！我想我錯過了一些主要框架。對於這個問題，我需要ActionScript還是JavaScript以外的其他東西？提前感謝提示！

編輯：我喜歡這第一個建議，我想我可以做到這一點。它也將使我也跟隨亞歷克斯shishkin的建議，以避免LIMIT n，1查詢（我確實想保留SQL BLOB字段儘管）的一部分，但我怎麼把二進制數據從XML到JavaScript中的Image（）對象？

來源

2009-03-06 agartland

也許這裏？：來自服務器的圖像，我喜歡這個建議，我想我能弄完。它也將使我也遵循亞歷克斯shishkin的建議，以避免LIMIT n，1查詢（我確實希望保留SQL BLOB字段儘管）的一部分但我怎麼把二進制數據從XML到XML中的Image（）對象？謝謝！ – agartland 2009-03-06 18:10:23

我會說：

有訪問getdata.php生成包含下10張圖像的XML文件。
有javascript來從AJAX請求獲取XML響應getData.php。
逐個遍歷XML響應中的圖像，當顯示第九個圖像時，查詢下一組圖像的getData.php。

至於框架：我的建議是使用JQuery的AJAX請求和圖像顯示和預加載。

您可以使用像base64這樣的二進制到文本編碼來通過XML傳遞二進制數據。在大多數的瀏覽器，你可以通過自己使用的base64解碼，並把它傳遞給圖像對象，像這樣：

<img src="data:image/jpeg;base64,your binary data comes here">

這會，但在所有的Internet Explorer，則可以通過院長愛德華茲用neat trick傳遞的base64數據回到IE模塊的PHP模塊:)

使用jQuery和PHP的簡單圖像（沒有幻燈片...這只是我的測試代碼）的代碼看起來是這樣的：

PHP：

<?php 
    echo base64_encode(file_get_contents("image.jpg")); 
?>

JS/JQuery的：

$(document).ready(function() { 
    $.get("image.php", function(data) { 
     $(document).append("<img src=\"data:image/jpeg;base64,"+ data +"\">"); 
    }); 
});

來源

2009-03-06 09:55:03 Huppie

我喜歡這個建議，我想我可以做到這一點。它也將使我也跟隨亞歷克斯shishkin的建議，以避免LIMIT n，1個問題（我想保留SQL BLOB字段儘管）的一部分但是，如何將XML中的二進制數據粘貼到JavaScript中的Image（）對象？謝謝！ – agartland 2009-03-06 18:09:40

使用二進制圖像，並「限制N，1」 - 很糟糕的解決方案

爲什麼你的圖像沒有存儲在數據庫中作爲圖像的鏈接？並且圖像必須存儲在文件系統上。像「Limit n，1」這樣的查詢確實很慢，特別是在大桌子上。您需要使用大偏移量的小查詢，而不是使用小偏移量的許多查詢，並將php數據打包爲json格式以發送到javascript。（例如限制爲100）發送其中一個圖像的ajax請求非常精彩。

不錯的幻燈片放映你可以在這裏找到 - plugins.jquery.com。

來源

2009-03-06 14:45:24

創建一個網頁。
讓頁面連接到服務器並獲取帶有圖像ID的XML或JSON。
請求使用ID從步驟2

來源

2009-03-06 22:34:46 svinto

動態JavaScript幻燈片

回答

相關問題