從預加載中停止GIF

我正在玩一個前幾天創建的新網站。
該網站包含很多很多gif，並在首頁上顯示。截至目前，顯示一個靜態的.png縮略圖，當它懸停時，它會顯示gif。從預加載中停止GIF

這幾乎是我想要的。然而，截至目前，該網站預先加載頁面上的每一個gif，這需要很長時間，並且浪費了很多流量。如果首頁上有50個gif，每個gif是2mb，那麼每個用戶就有100mb的流量。
是不是隻能加載每個PNG，然後加載GIF，如果它懸停？我知道它不會在第一時間順利播放，但我的網絡酒店沒有很多網絡流量。

這可能與一些PHP或老式的JavaScript？

謝謝

來源

2012-02-22 Filuren

你如何用gif換出png？ CSS？ JavaScript的？ – 2012-02-22 19:52:50

你如何做懸停改變？用CSS？ – cha0site 2012-02-22 19:53:39

PHP是服務器端，所以它不相關。你需要的是在客戶端運行的JavaScript。 CSS也可以工作（使用：hover事件），但是我不確定它是否也會預載圖像（通過測試和觀察服務器日誌來檢查是否容易）。 – Kitsune 2012-02-22 19:54:19

使用懸停更改圖像的URL。在這種情況下，使用jQuery

$('#my_image').hover(function(){ 
    $('#my_image').attr('src','my.gif'); 
});

想讓它動態而不必爲每個圖像設置它？添加HTML5數據元素：

<img src="my.png" data-gif="my.gif" />

使用JavaScript：

$('img').hover(function(){ 
    $(this).attr('src',$(this).data('gif')); 
});

來源

2012-02-22 19:53:15

我在哪裏添加jQuery和JavaScript到我的頁面？我是否必須爲我的所有標籤使用HTML5數據元素？ – Filuren 2012-02-22 20:00:40

使用您要替換的所有圖像的數據元素。 jQuery可以放在任何地方，只是不要忘記在你的站點上包含jQuery – 2012-02-22 20:12:47

......或者更好的是不要使用jQuery來處理那些簡單的任務，這是開銷。 – Bergi 2012-02-22 20:16:02

您可以添加包含GIF圖片的DOM頁面加載後，將它作爲一個字符串或使用AJAX的HTML。

另一個可行的解決方案是使用CSS精靈，並通過將它們組合成更大的圖像來消除所有這些圖像。

來源

2012-02-22 19:54:36

如何使用AJAX加載圖像？ – Bergi 2012-02-22 19:56:50

你不這樣做 - 你使用AJAX來抓取包含圖像引用的HTML。 – 2012-02-22 20:00:11

好的，但這似乎是一個小圖像網址的開銷... – Bergi 2012-02-22 20:08:14

您正在考慮錯誤的方式。除非您在圖像中包含圖像，否則瀏覽器不會請求圖像。你不應該試圖阻止加載包含的圖像，你應該簡單地不包括在第一個地方的圖像。

從代碼中移除圖片網址。無論您使用哪種代碼，隱藏圖像都可見，您也可以設置網址。

來源

2012-02-22 19:54:55 hvd

文件名除擴展名外是否相同？如果是的話我會推薦這種方法

Stop a gif animation onload, on mouseover start the activation

你會做什麼不同的是.gif這種替換.png將加載懸停，而不是在頁面加載的GIF。現在，它聽起來像你正在一個隱藏的div加載.png和.gif。

編輯：

然後鼠標移開時，你會切換源回.png上。

來源

2012-02-22 19:55:52 Bot

從預加載中停止GIF

回答

相關問題