我想停止使用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秒钟我与原始图像添加它之后。 仍然无法正常工作,至少萤火说,这些图像获得在启动加载,是萤火信任?
我认为这个问题是你排空“IMG”属性,而不是“SRC”。
如果您在本地网页上测试这一点,那么你的本地图片可能加载速度太快。 或者他们可以直接从浏览器缓存取。 请检查如果图像被清空其“src”中之前已经加载。
尝试removeAttr( “SRC”); 在http://www.appelsiini.net/projects/lazyload
$(document).ready(function () {
var images = $('img');
$.each(images, function() {
$(this).removeAttr("src");
});
});
如果仍然不能正常工作。 检查this.loaded - 也许它们加载速度太快。
如果你的目标是防止服务器加载图像,然后清除“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”的,因为他们是从服务器上删除负载的目的,没有点之前缓存不从服务器再次请求)。
$(document).ready(function () { var images = $('img'); $.each(images, function() { $(this).attr('src', ''); }); });
这是行不通的,因为jQuery是被调用的页面加载在后:
$(document).ready()
所有这些代码会做的是去除src值图像已经从服务器调用后。
我不知道你有没有写错的问题,但你应该设置为空字符串的属性是“SRC”而不是“IMG”。 试试这个:
$(document).ready(function () {
var images = $('img');
$.each(images, function() {
$(this).attr('src', '');
});
});
我觉得你的问题是你正在运行的$(document)。就绪,当文档准备好被称为内的代码 - 即。 当满载,包括图像。 该LazyLoad插件,您链接到不使用$(文件)。就绪,和脚本被放置在头部,所以它之前运行/而在页面加载,而不是事后。
我建议使用jQuery Lazyload插件此。 它不正是你想要的。
http://www.appelsiini.net/projects/lazyload
在我的缩略图将在悬停事件的图像加载时,我有同样的问题,在IE中它会导致“堆栈溢出”当我将鼠标悬停在缩略图上。
但现在解决了。 此代码救了我的一天:
$(document).ready(function() {
var images = $('img');
$.each(images, function() {
$(this).removeAttr("src");
});
});
使用JavaScript你不喜欢这样。
var imagesArray = document.querySelectorAll('img');
for(var i=0; i<imagesArray.length; i++) {
imagesArray[i].src = '';
}
首先考虑使用香草的JavaScript。