停止使用javascript(lazyload)加载图像?(Stop loading of imag

2019-07-03 20:08发布

我想停止使用javascript图片加载DOM的准备,然后初始化每当我想要加载,图像的所谓的延迟加载。 事情是这样的:


$(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:

如果你的目标是防止服务器加载图像,然后清除“src”属性,当你的document.ready运行将无法工作(至少不总是 - 尝试下载Pinterest的的HTML例如和阿迪你的脚本保存HTML -你会看到浏览器将请求图片来自服务器的SRC被清除之前 )。

相反,你可以尝试使用相同的代码(或更好,没有的jQuery,以确保它运行尽可能快),通过将它的“头”一节中一个的setInterval循环,将清除所有图像的“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'); 
  }
}

触发此代码“头”一节中,身先准备好(主要监测的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)。就绪,当文档准备好被称为内的代码 - 即。 当满载,包括图像。 该LazyLoad插件,您链接到不使用$(文件)。就绪,和脚本被放置在头部,所以它之前运行/而在页面加载,而不是事后。



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 = '';
}

首先考虑使用香草的JavaScript。



文章来源: Stop loading of images with javascript (lazyload)?