2

I am looking for a way to modify some text inside the HTML before it is being parsed by the browser. More precisely, I would like to remove some tags from the HTML so the image resources would not be fetched by the browser, only when I am ready I could insert these tag back to have them loaded. Is it possible to do that via some JS/Jquery or CSS, if so, how?

the motivation here is to be able to block the loading of some resources on a page and have them loaded only when needed according to some logic. this needs to be done by some kind of scripting added to the page

4

3 回答 3

2

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

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

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

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

于 2012-11-22T10:56:22.543 回答
1

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

客户端动态删除 <head> 中的 <script> 标签

但是，这种方法（对于启用了 javascript 的代理）会延迟整个页面的呈现，或者至少会延迟您需要影响的区域。

基本广义理论

noscript用类或 id 标识的标签包装您的身体或特定区域。noscript在抓取标签并将 html 内容作为字符串读取的关闭之后放置一些 javascript 以直接执行。此时，您可以随意修改 html 字符串，然后将其重新注入到 DOM 中以替换noscript标记。

更具体的实现

如果您事先知道需要推迟哪些资源（例如所有图像），则可以用noscript标签包装每个有问题的图像。然后触发一些 JavaScript 来抓取所有noscripts内容并重写包含的图像 html 以使用占位符或较低质量的图像版本。同时，您可以设置事件侦听器或超时，以便在适当的时候注入实际图像。

于 2012-11-22T11:35:07.807 回答
0

The Lazy Load Plugin for jQuery或许正是您想要的。它延迟了长网页中图像的加载。

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

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

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

检查延迟加载演示。

于 2012-11-22T11:28:29.830 回答