如何在手機上不加載圖像？

Question

我正在尋找使圖像（真實img元素，無背景圖像屬性）無法加載到手機上的最佳方法。 由於使用媒體查詢和設置display ，以none不需額外使瀏覽器停止預載的圖片，我使用純CSS / HTML5沒有JavaScript的研究更好的方法。 我看到的唯一方法是使用 HTML5 picture元素僅以特定屏幕寬度加載圖像。

<picture>
   <source media="(min-width: 480px)" src="some.png">
</picture>

但是目前主流瀏覽器還不支持圖片元素，所以這也不是一個解決方案。 你有其他想法如何實現它嗎？ 如果沒有純 CSS/HTML 方法，使用 JavaScript 的最佳方法是什么？

Answer 1

對於任何尋求更現代方法的人（截至 2019 年）：

 <picture> <source media="(min-width: 1000px)" srcset="***url of image***"> <source media="(max-width: 999px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%"> <img src="***url of image***" alt="***Image alt***"> </picture>

• 如果瀏覽器的寬度大於 1000px 則顯示圖片的 url
• 如果瀏覽器的寬度小於 1000 像素，則顯示以 base64 數據表示的圖像（大小可以僅為 1 像素），這樣就不會從服務器下載任何內容。
• 回退（如果瀏覽器不支持） - 使用舊標簽

Answer 2

在您的情況下，從移動優先方法開始可能會更好。 首先不加載任何圖像，然后在滿足某些要求時使用 JavaScript 添加圖像。 例如像這樣使用 jQuery：

if ($(window).width() > 959) {
    $("body").append("<img/>");
}

如果您想讓它具有響應性/動態性：

$(window).resize(function() {
    if ($(window).width() > 959) {
        $("body").append('<img src="path/to/img.jpg" class="responsive-image"/>');
    } else {
        $(".responsive-image").remove();
    }
}).resize();