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 回答