Question

我试图在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

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

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

如果仍然无效。检查this.loaded - 也许它们加载得太快。

Answer 2

如果您的目标是阻止服务器加载图像，那么当您在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 3

我认为问题是你要清空'img'属性，而不是'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

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

$(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<imagesArray.length; i++) {
    imagesArray[i].src = '';
}

首先考虑使用Vanilla Javascript。

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

9 个答案: