Question

我正在寻找在手机上无法加载图像（真正的img元素，没有背景图像属性）的最佳方法。由于使用媒体查询并将display设置为none不会使浏览器停止预加载图像，因此我研究了使用纯CSS / HTML5而不使用JavaScript的更好方法。我看到的唯一方法是使用HTML5 picture元素仅在特定屏幕宽度下加载图像。

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

然而主要浏览器还不支持图片元素，所以这也不是解决方案。你有任何其他想法如何实现它？如果没有纯CSS / HTML方法，那么使用JavaScript的最佳方式是什么？

Answer 1

在您的情况下，从移动优先方法开始可能会更好。首先不加载任何图像，然后使用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();

Answer 2

对于任何寻求更现代方法的人：

MATCH  (warehouse:WAREHOUSE)
MATCH rel = ((warehouse)-[limit:LIMIT]->(constraint:CONSTRAINT)<-[amount:AMOUNT]-(product:PRODUCT))
WITH warehouse, product, collect(relationships(rel)) as paths
WHERE all( p in paths WHERE p[0].value > p[1].value )
return product

如果浏览器的宽度大于1000px，则显示 url 图片
如果浏览器的宽度小于1000px，则显示表示为vase64数据的图像（大小可能仅为1px），这样就不会从服务器下载任何内容。
（如果浏览器不支持）Fallback使用标签

如何在手机上加载图片？

2 个答案: