停止使用 javascript (lazyload) 加载图像？答案

【问题标题】：Stop loading of images with javascript (lazyload)?停止使用 javascript (lazyload) 加载图像？
【发布时间】：2014-09-17 14:41:51
【问题描述】：

我试图在 dom 就绪时停止使用 javascript 加载图像，然后在我想要的时候初始化加载，即所谓的图像延迟加载。像这样的：


$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

这不起作用（在 ff3.5、safari 3-4 中测试）。无论如何，图像正在加载，我不明白。

例如，这个插件 www.appelsiini.net/projects/lazyload 正在做同样的事情，在页面加载时删除 src 属性。

我错过了什么？

编辑：我在这里添加了一个测试页面：http://dev.bolmaster2.com/dev/lazyload-test/ 我首先完全删除 src 属性，然后在 5 秒后将其与原始图像一起添加。还是不行，至少firebug说图片一开始就加载了，firebug可信吗？

【问题讨论】：

标签： javascript jquery lazy-loading

【解决方案1】：

尝试 removeAttr("src");如http://www.appelsiini.net/projects/lazyload

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

如果它仍然无法正常工作。检查 this.loaded - 可能它们加载得太快了。

【讨论】：

【解决方案2】：

如果您的目标是阻止服务器加载图像，那么当您在 document.ready 中运行时清除“src”属性将不起作用（至少并非总是如此 - 例如，尝试下载 pinterest 的 html 并添加您的脚本到保存的 html - 您将看到浏览器将在清除 src 之前从服务器请求图像）。

相反，您可以尝试使用相同的代码（或者更好的是，不使用 jQuery，以确保它尽可能快地运行），方法是将其放在将清除“src”属性的 setInterval 循环内的“head”部分一旦标签出现（在 jQuery 文档就绪被触发之前），就从所有图像中提取。

例子：

删除没有 jQuery 的图像：

function removeImagesBeforeTheyAreRequested(options) {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src;
    images[i].removeAttribute('src'); 
  }
}

在正文准备好之前，在“head”部分中触发此代码（基本上是监控 img 标签的存在）：

var timer = setInterval(function() {
   removeImagesBeforeTheyAreRequested();
}, 1);

在 3 秒后停止寻找图像：

setTimeout(function() { clearInterval(timer); }, 3000);

请注意，您可能需要在删除它们的“src”属性之前检查图像是否被缓存（这些图像会被浏览器加载得非常快，并且为了从服务器中删除负载而删除它们的“src”是没有意义的因为它们不再从服务器请求）。

【讨论】：

【解决方案3】：

我认为问题在于您要清空“img”属性，而不是“src”。

如果您在本地页面上对此进行测试，那么您的本地图片可能加载速度过快。或者它们可能是直接从浏览器缓存中获取的。在清空它的'src'之前尝试检查图像是否已经加载。

【讨论】：

如果您在本地页面上进行测试，那么您的本地图像可能加载速度过快。或者它们可能是直接从浏览器缓存中获取的。
感觉就像我一直从我的测试中得到不同的结果。我将创建一个测试页面。
@users_1313：您应该编辑您在评论中给出的答案。也许你可以得到答案作为答案..
我也没有在本地测试过，同样的问题。我还使用 web developer-addon 来禁用缓存，所以它们不应该被缓存
我刚刚测试了为文件名添加时间戳，因此它永远不会被缓存：dev.bolmaster2.com/dev/lazyload-test/nocache.php 这作为例外工作，所以我的问题是我信任 web developer-firefox-plugin 来禁用缓存但是它没有。谢谢！

【解决方案4】：

$(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});

这不起作用，因为在页面加载后调用 jQuery：

$(document).ready()

所有这些代码要做的就是在图像已经从服务器调用之后删除 src 值。

【讨论】：

这不是真的。 $(document).ready() 在 DOM 加载后触发，包括样式表和脚本，但不包括图像（您描述的是 document.body.onload 或 window.onload）。如果浏览器有一些空闲的空闲连接并且在页面触发$(document).ready() 时，它可能已经开始从服务器请求一些图像。但是，如果您有很多未缓存的图像，您仍然可以按时删除图像src 属性，从而阻止这些图像加载。

【解决方案5】：

我不知道你是否在问题中写错了，但你应该设置为空字符串的属性是“src”而不是“img”。试试这个：

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});

【讨论】：

哎呀，对不起，那只是一个错字！

【解决方案6】：

我认为你的问题是你在 $(document).ready 中运行代码，当文档准备好时调用它 - 即。当它完全加载时，包括图像。您链接到的 LazyLoad 插件不使用 $(document).ready，并且脚本放置在标题中，因此它在页面加载之前/期间而不是之后运行。

【讨论】：

这应该不是问题，因为 LazyLoad 插件使用的 $(function(){} 只是 $(document).ready 的快捷方式，它在 DOM 准备好时运行，而不是文档内容

【解决方案7】：

我建议为此使用 Jquery Lazyload 插件。它完全符合您的要求。

http://www.appelsiini.net/projects/lazyload

【讨论】：

当然我可以这样做 - 但这个问题更多的是关于lazyload-plugin正在做的基本事情：删除图像元素的src以及为什么它不起作用......毕竟它确实按预期工作，只是图像被缓存了，即使我已经关闭了 Firefox 的 Web 开发者扩展上的缓存。
注意！延迟加载插件可能会损坏您页面的 Google 搜索结果 - 随后的图像不会被编入索引。最好将data-src 与onload() 结合使用，这样每个元素都会自己注册。

【解决方案8】：

将图像加载到缩略图上的悬停事件时，我遇到了同样的问题，在 IE 中，当我悬停在缩略图上时，它会导致“堆栈溢出”。
但是现在已经解决了。这段代码拯救了我的一天：

$(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});

【讨论】：

【解决方案9】：

使用 JavaScript，你可以这样做。

var imagesArray = document.querySelectorAll('img');

for(var i=0; i<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

首先考虑使用 Vanilla Javascript。

【讨论】：