停止使用javascript加载图像（lazyload）？

我试图在dom ready上停止使用javascript加载图像，然后根据需要初始化加载，这就是所谓的延迟加载图像。大概是这样的：

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

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

例如，这个插件www.appelsini.net/projects/lazyload正在做完全相同的事情，删除页面加载上的src属性

我错过了什么

编辑：我在此处添加了一个测试页面： 我首先完全删除src属性，然后在5秒钟后将其与原始图像一起添加。仍然不起作用，至少firebug说图像是在开始时加载的，firebug可信吗？

试试removeAttr（“src”）；如

---

如果它仍然不起作用。检查此项。已加载-可能加载得太快。

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

---

如果您在本地页面上测试此功能，则本地图像的加载速度可能过快。或者，它们可能直接从浏览器缓存中获取。在清空图像的“src”之前，请尝试检查图像是否已加载

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

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

---

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

我建议使用Jquery LazyLoad插件。这正是你想要的

---

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

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

这将不起作用，因为在以下位置加载页面后将调用jQuery：

$（document）.ready（）

---

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

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

相反，您可以尝试使用相同的代码（或者更好，在没有jQuery的情况下，确保它尽可能快地运行），方法是将代码放在setInterval循环的“head”部分，该循环将在标记出现时（在jQuery document ready启动之前）立即从所有图像中清除“src”属性

例如：

删除不带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'); 
  }
}

3秒后停止尝试查找图像：

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

---

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

使用JavaScript，您可以这样做

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

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

var-imagesArray=document.querySelectorAll（'img'）；
对于（var i=0；ioops，对不起，这只是一个输入错误！如果您在本地页面上测试此项，则您的本地图像可能加载得太快。或者这些图像可能是直接从浏览器缓存中获取的。感觉好像我一直从测试中得到不同的结果。我将创建一个测试页面。@users\u 1313:您应该编辑您在t中给出的答案他评论道。也许你可以得到信任作为答案。我也测试了非本地，同样的问题。我还使用web developer插件禁用缓存，所以它们不应该被缓存。我只是测试了一下，在文件名中添加一个时间戳，这样它就永远不会被缓存：这是例外，所以我的问题是我信任web developer firefox插件禁用cac谢谢！这不应该是问题所在，因为$（function（）{}，LazyLoad插件使用的是$（document）的快捷方式.ready，它在DOM就绪时运行，而不是文档内容我当然可以这样做-但是这个问题更多的是关于lazyload插件正在做的基本事情：删除图像元素的src，以及为什么它不工作..毕竟它按照预期工作，只是图像被缓存了，即使我关闭了缓存在firefox的web developer扩展上。注意！延迟加载插件可能会损坏页面的Google搜索结果-后续图像不会被索引。最好将
data src
与
onload（）
结合使用，这样每个元素都会自动注册。这不是真的。
$（document）.ready（）
在加载DOM后触发，包括样式表和脚本，不包括图像（您所描述的是
document.body.onload
或
window.onload
）。如果浏览器有一些空闲连接，并且在页面触发
$（document.ready（）的位置
，它可能已经开始从服务器请求一些图像。但是，如果您有很多未缓存的图像，您仍然可以按时删除图像
src
属性，从而阻止加载这些图像。
var timer = setInterval(function() {
   removeImagesBeforeTheyAreRequested();
}, 1);

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

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

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