javascript Jquery 删除图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12296432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Remove Image
提问by praks5432
My overall problem is to lazy load images. I've gotten to the point where I'm loading the images only when they are on screen. I need to remove the images that are not on screen.
我的总体问题是延迟加载图像。我已经到了只有当它们出现在屏幕上时才加载图像的地步。我需要删除不在屏幕上的图像。
I thought
我想
$(image).removeAttr("src")
would do it and it rightly removes src, but it does not clear the image from the screen, nor does it replace it with what is in alt.
会这样做，它正确地删除了 src，但它不会从屏幕上清除图像，也不会用 alt 中的内容替换它。
How do I make it remove the image? Note, I do not want to remove the img tag (I need it for later), just clear the image from the screen.
我如何使它删除图像？请注意，我不想删除 img 标签（我稍后需要它），只是从屏幕上清除图像。
Other code that may be relevant(although why I don't know)-
其他可能相关的代码（尽管我不知道为什么）-
updateCarImages:=>
imagesOnScreen = $(@el).find(".carImageClass:onScreen")
imagesOffScreen = _.without(cachedImagesOnScreen,imagesOnScreen)
for image in imagesOnScreen
imgSrc = $(image).attr("src")
if (!imgSrc)
id = $(image).data("tooltip-id")
console.log(id)
result = resultsStore.get(id+"")
console.log(result)
$(image).attr("src", result.get("carImageUrl"))
console.log(imagesOffScreen)
for image in imagesOffScreen
$(image).removeAttr("src")
采纳答案by David Hellsing
If you are trying to clear memory (which as I see it would be the only reason to remove images that are not visible) you are up for a ride.
如果您想清除内存（在我看来，这将是删除不可见图像的唯一原因），那么您就准备好了。
There is no bullet proof way to force a browser to do that. The only way the browser will call the garbage collector is to reach a certain memory limit, and then hint the collector what it should take first.
没有防弹方法可以强制浏览器这样做。浏览器调用垃圾收集器的唯一方法是达到一定的内存限制，然后提示收集器首先应该采取什么措施。
Moving nodes to a bin and empty it is considered a good way:
将节点移动到一个 bin 并清空它被认为是一个好方法：
var $trash = $('<div>').hide().appendTo('body');
var waste = function(node) {
$trash.append(node).html('');
}
You might get lucky with replacing the source with an empty GIF:
用空的 GIF 替换源可能会很幸运：
$(image).attr('src','data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA??LAAAAAABAAEAAAICRAEAOw%3D%3D');
This will also keep the node in place and image width/height.
这也将保持节点和图像宽度/高度。
But I highly doubt that any of this will result in any performance gain in your case, the best thing is to not stress the browser with too much data at all.
但我非常怀疑，在您的情况下，任何这些都会导致任何性能提升，最好的办法是根本不要用过多的数据给浏览器带来压力。
iOS for iPad (especially version 4.x) is known for having a low memory limit and can easilly crash if you leave too many IMG nodes around.
iPad 版 iOS（尤其是 4.x 版）以内存限制低而著称，如果留下太多 IMG 节点，很容易崩溃。
回答by Curt
If your issue is performance, then you can use a pre-existing lazy load jQuery plugin. There is no point re-inventing the wheel.
如果您的问题是性能，那么您可以使用预先存在的延迟加载 jQuery 插件。重新发明轮子是没有意义的。
http://www.appelsiini.net/2012/lazyload-170
http://www.appelsiini.net/2012/lazyload-170
Alternatively if you don't wish to use this plugin you could store the srcvalue in a data-*attribute and only attach it to srcwhen you wish to display it.
或者，如果您不想使用此插件，您可以将src值存储在一个data-*属性中，并且仅src在您希望显示它时才将其附加到。
When hiding:
隐藏时：
$(image).data("src", $(image).attr("src"));
$(image).removeAttr("src");
$(image).hide();
When displaying:
显示时：
$(image).attr("src", $(image).data("src"));
$(image).show();
回答by Pez Cuckow
To hidethe image:
要隐藏图像：
$(image).hide();
This will set style="display:none;"on the image and make it not appear
这将设置style="display:none;"在图像上并使其不出现
To deletethe image:
要删除图像：
$(image).remove();
This will Physically remove it from the DOM so it no longer exists
这将从 DOM 物理上删除它，因此它不再存在
Hybridapproach (leaves the image in the DOM and allows you to change it later)
混合方法（将图像留在 DOM 中并允许您稍后更改它）
//Remove the SRC and hide the image
$(image).removeAttr("src").hide();
//Then when you want to change to a new image
$(image).attr("src", "iamge.gif").show();
回答by JAR.JAR.beans
You can simply hide the image. If you don't wat to go there , you can maybe create a 1px image and than :
您可以简单地隐藏图像。如果你不想去那里，你可以创建一个 1px 的图像，然后：
$(image).attr('src', '1px.png');
回答by Michal Klouda
If you want to hide the image, but keep it in place in terms of taking up its space and not affecting container's scrollbars, use visibility: hiddenstyle:
如果您想隐藏图像，但在占用其空间而不影响容器的滚动条方面将其保留在原位，请使用visibility: hidden样式：
$(image).css('visibility', 'hidden');
回答by Rahul Sinha
You can simply remove image from this code. I have tried it.
您可以简单地从此代码中删除图像。我试过了。
$('.img2').dblclick(function()
{
$(".img2").removeAttr('src');
});
回答by hperezll
This following code shows how I was able to remove the image source
以下代码显示了我如何能够删除图像源
var image_holder = $("#preview-image-holder");
image_holder.empty();
