Question

我的问题与this类似，但我无法在服务器端执行，因为我只想删除图像如果浏览器宽度小于850px。
我目前正在使用这个：

$(function () {
    if($(document).width() < 850) {
        $('.thumb').remove();
    }
});

图片会被移除，但正如您所见here，浏览器无论如何都会加载它们有人有解决方案吗？

由于

解决方案（现在可以使用！：

除非总是加载图像，否则永远不要加载它们，除非浏览器大于850 HTML：

<?php 
if(file_exists($sites[$i].'/thumb.png')) { ?>
    <img class="thumb" data="/experiments/<?=$sites[$i]?>/thumb.png" />
<?php 
} 
?>

JS：

$('.thumb').each(function(index, element) {

        $(this).attr('src', $(this).attr('data'));
});

Answer 1

我认为你必须反过来说：这意味着你只会在文档中加载图像。宽度比850宽。据我所知，如果在HTML文档中“硬编码”，则在脚本运行之前将请求/加载图像。

Answer 2

当然。 Remove（）首先加载它们，然后将它们从DOM中删除。

删除它们以便浏览器永远不会加载它们的唯一方法是使用服务器端语言。在服务器端语言中，您可以检测到图片是否在页面上，如果是，则可以删除它们。因此，图像永远不会发送到浏览器。

至于你的情况，“if（$（document）.width（）＆lt; 850）”被使用，所以你无法完成服务器端的全部。

为什么不在服务器端和浏览器端之间进行交换？像PHP和JavaScript一样？

例如，您可以使用JavaScript检测文档宽度是否小于850.如果是，则使用参数（remove = true）加载iframe。 iframe页面将包含所有.thumb和图像以及所有内容，您可以在页面上使用PHP来检测是否存在“remove = true”参数（使用$ _GET [remove]）。如果是，它将不会显示.thumb并且永远不会将其发送到浏览器。

Answer 3

KG克里斯滕森和您设置图片src属性的想法很好。

另一个可行的想法是使图像具有display: none;样式，并且只有在满足条件时才将其更改为display: inline;。如果图像被隐藏，浏览器不应加载图像。

有些事情：

<style type="text/css">
.thumb {
  display: none;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
  if ($(document).width() >= 850)
    $('.thumb').show();
});
</script>

jquery在加载之前从页面中删除图像

3 个答案: