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

我试图在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秒后我将其与原始图像一起添加。 仍然不起作用，至少萤火虫说图像在开始时加载，是不是信任萤火虫？

Answer 1

我认为问题是你要清空’img’属性，而不是’src’。

如果您在本地页面上测试它，那么您的本地图像可能加载速度太快。 或者它们可能直接来自浏览器缓存。 在清空其’src’之前，请尝试检查图像是否已加载。

Answer 2

尝试removeAttr（“src”）; 如http://www.appelsiini.net/projects/lazyload

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

如果仍然无法正常工作。 检查this.loaded – 也许他们加载太快。

Answer 3

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

相反，您可以尝试使用相同的代码（或更好，没有jQuery，以确保它尽可能快地运行），方法是将它放在setInterval循环中的“head”部分，该循环将清除所有图像中的“src”属性一旦标记存在（在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”，因为它们是没有再从服务器请求）。

Answer 4

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

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

$(document).ready()

所有这些代码都将在从服务器调用映像后删除src值。

Answer 5

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

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

Answer 9

使用JavaScript，你就是这样做的。

 var imagesArray = document.querySelectorAll('img'); for(var i=0; i 

首先考虑使用Vanilla Javascript。