Question

我正在寻找一种在浏览器解析之前修改HTML内部文本的方法。更确切地说，我想从HTML中删除一些标签，这样浏览器就不会获取图像资源，只有当我准备就绪时，我才能将这些标签插回来加载它们。是否可以通过一些JS / Jquery或CSS来实现，如果是这样，怎么做？

这里的动机是能够阻止页面上某些资源的加载，并且只在需要时根据某些逻辑加载它们。这需要通过添加到页面的某种脚本来完成

Answer 1

因为您在JavaScript中执行此操作，所以在启动<script>标记时，HTML已经被处理。

您可以将<script>标记从<head>移到<body>，或将其移动到正文的最开头。但是，这里的问题是你必须等到你的元素才能真正在DOM中创建，然后才能使用它们。

您可以使用类似setTimeout()或类似内容的东西，并在找到它们之前不断寻找它们，但是在它们创建和脚本找到它们之间仍然会有轻微的延迟，此时它们可能已经存在开始加载。

唯一可靠的方法是在到达浏览器之前很久就处理标记服务器端。

Answer 2

如果您可以在解析/评估之前将noscript标记放在标记的关键位置，那么我的答案可能会有用：

Client-Side Dynamic Removal of <script> Tags in <head>

此方法（适用于启用javascript的代理）会延迟整个页面的呈现，或至少延迟您需要影响的区域。

基本广义理论

使用标识为类或ID的noscript标记包裹您的身体或特定区域。放置一些javascript以在关闭标记的关闭noscript之后直接执行，并将html内容作为字符串读取。此时，您可以根据需要修改html字符串，然后将其重新注入DOM，替换noscript标记。

更具体的实施

如果您事先知道需要推迟哪些资源 - 说出所有图片 - 您可以用noscript标记包装每个图像。然后触发一些抓取所有noscripts的JavaScript并重写包含的图像html以使用占位符或较低质量版本的图像。同时，您可以设置事件监听器或超时，以便在时机成熟时注入实际图像。

Answer 3

Lazy Load Plugin for jQuery可能就是你要找的东西。它延迟了长网页中图像的加载。

您可以使用任何jQuery事件，例如click或mouseover。您还可以使用自己的自定义事件，例如foobar。默认是等到用户向下滚动并且图像出现在窗口上。

除此之外还可以延迟加载图像。以下代码等待页面完成加载（不仅是HTML，还包括任何可见图像）。页面完成后五秒钟，图像会自动加载。

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {
       $("img.lazy").trigger("sporty");
    }, 5000);
});

检查delayed loading demo。

如何在浏览器解析HTML之前预处理HTML - 阻止resorce加载

3 个答案:

基本广义理论

更具体的实施