6

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

4

9 回答 9

4

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

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

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

于 2009-08-27T09:25:01.323 回答
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”来删除服务器的负载，因为它们是不再向服务器请求）。

于 2014-05-11T16:16:23.373 回答
1

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

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

于 2009-08-27T09:25:19.793 回答
1 
$(document).ready(function () {
    var images = $('img');
    $.each(images, function() {
        $(this).attr('src', '');
    });
});

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

$(document).ready()

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

于 2011-07-05T20:38:07.997 回答
0

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

$(document).ready(function () {
  var images = $('img');
  $.each(images, function() {
    $(this).attr('src', '');
  });
});
于 2009-08-27T09:26:37.983 回答
0

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

于 2009-08-27T09:51:50.210 回答
0

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

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

于 2010-07-28T21:49:44.947 回答
0

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

$(document).ready(function() {
  var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("src");
  });
});
于 2011-04-16T04:19:19.550 回答
0

使用 JavaScript，您可以这样做。

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

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

考虑先使用 Vanilla Javascript。

于 2014-09-17T06:41:51.227 回答