如果互聯網速度是高負載圖像或根本不加載

我在SO搜索了很多關於類似事情的問題。但似乎沒有人適合我的情況。如果互聯網速度是高負載圖像或根本不加載

我有幾個不同的背景圖像。現在我手動創建基於背景圖像的漸變，並將其設置爲默認值。並在3秒後將背景圖像加載到默認漸變上。

但我不想要這種方法。我只想在用戶連接良好的情況下顯示圖像。否則，根本不顯示圖像，讓該背景圖像的漸變在那裏。

代碼示例：CSS

.test1 { 
    background-image: -webkit-gradient(linear, 0 0, 86 148, color-stop(0.011, #898568)); 
    background-image: -webkit-linear-gradient(300.1600608380871deg, #898568 1.1%); 
    background-image: -moz-linear-gradient(300.1600608380871deg, #898568 1.1%); 
    background-image: -o-linear-gradient(300.1600608380871deg, #898568 1.1%); 
    background-image: linear-gradient(149.83993916191292deg, #898568 1.1%) 
} 

.test1-img { 
    background-image: url("img1.jpg"); 
}

代碼示例：JS

setTimeout(function() { 

$('#test1-div').toggleClass('test1-img'); 

}, 3000);

那麼是否有可能做到這一點的jQuery或JS？或任何插件呢？

PS：我不希望延遲加載算法。導致它在用戶進入視口時加載圖像，即使它們具有較低的互聯網連接。對我而言，我不想爲低速連接顯示背景圖像。

PS2：我是新的JS，所以與解釋工作的解決方案是非常好的，我明白了。

來源

2017-01-18 Em Ji Madhu

什麼是一個很好的互聯網連接？ 5，10，100 Mbps？連接延遲又如何？ –

你會如何確定連接的速度？理論上你可以通過'AJAX'發送'Date.now（）'，讓服務器以自己的時間響應並計算'ping'，但只處理延遲？ –

如果你有嘗試加載一個單一的形象OK，你可以嘗試像以下：

window.speedyConnection = false; 

var image = document.createElement("img"); 
image.onload = function() { 
    window.speedyConnection = true; 
    //Load your images here 
} 
image.src = "img1.jpg"; 

setTimeout(function() { 
    if (!window.speedyConnection) { 
     image.remove(); 
    } 
}, 750);

的想法是，你嘗試加載第一圖像，但如果它不在750毫秒內加載（或者你喜歡的任何超時），你假設用戶連接不好並停止加載它。如果它確實加載，則繼續並加載其餘的圖像。

然而這將，至少需要發送針對圖像的請求和接收的一些數據（即使在低速連接），但它也只是對單個圖像，你會在超時後取消它。

來源

2017-01-18 09:23:04 MatthewSot

對不起，延遲迴復。我很忙。你的解決方案看起來很有希你能使它與CSS'background-image'屬性一起工作嗎？現在它適用於'img'。並且是加載一個圖像不是問題。 –

絕對！你可以做的是在這裏說'//在這裏加載你的圖像'，只需用一些Javascript代碼來替換它以開始加載你的背景圖像。我想在你的例子中，你可以使用'（'＃test1-div'）。toggleClass（'test1-img'）;' – MatthewSot

沒有它不適合我。對不起，:( –

如果互聯網速度是高負載圖像或根本不加載

回答

相關問題