0

我的问题与此类似，但我不能在服务器端执行此操作，因为我只想在浏览器宽度小于 850 像素时删除图像。
我目前正在使用这个：

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

图像被删除，但正如您在此处看到的，浏览器仍然会加载它们。
有人对此有解决方案吗？

谢谢

解决方案（它现在有效！：

不要总是加载图像，永远不要加载它们，除非浏览器大于 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'));
});
4

3 回答 3

3

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

于 2012-12-29T19:24:10.813 回答
0

当然。Remove() 首先加载它们，然后从 DOM 中删除它们。

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

至于您的情况，使用了“if($(document).width() < 850)”，因此您不能在服务器端完成所有操作。

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

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

于 2012-12-29T19:31:59.153 回答
0

KG Christensen 和您设置图像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>
于 2012-12-29T19:36:20.013 回答