Jquery删除图像

Jquery Remove Image

本文关键字：图像 删除 Jquery      更新时间：2023-09-26

我的总体问题是延迟加载图像。我已经到了只有当图像出现在屏幕上时才加载图像的地步。我需要删除屏幕上没有的图像。

我以为

$(image).removeAttr("src")

会这样做，它正确地删除了src，但它没有从屏幕上清除图像，也没有用alt.中的内容替换它

如何使其删除图像？注意，我不想删除img标记（我稍后需要它），只需从屏幕上清除图像即可。

其他可能相关的代码（尽管为什么我不知道）-

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")

如果您正在尝试清除内存（正如我所见，这将是删除不可见图像的唯一原因），那么您就可以放心了。

没有防弹的方法可以强制浏览器这样做。浏览器调用垃圾收集器的唯一方法是达到一定的内存限制，然后提示收集器应该先使用什么。

将节点移动到垃圾箱并清空它被认为是一种好方法：

var $trash = $('<div>').hide().appendTo('body');
var waste = function(node) {
    $trash.append(node).html('');
}

你可能会幸运地用一个空的GIF替换源：

$(image).attr('src','data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA‌​LAAAAAABAAEAAAICRAEAOw%3D%3D');

这也将保持节点的位置和图像的宽度/高度。

但我非常怀疑，在你的情况下，这些都不会带来任何性能提升，最好的办法是不要给浏览器带来太多数据。

iOS for iPad（尤其是4.x版本）以内存限制低而闻名，如果你留下太多IMG节点，很容易崩溃。

隐藏图像：

$(image).hide();

这将在图像上设置style="display:none;"，并使其不显示

要删除图像：

$(image).remove();

这将从DOM中物理删除它，使其不再存在

混合方法（将图像留在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();

如果您的问题是性能，那么您可以使用预先存在的延迟加载jQuery插件。重新发明轮子是没有意义的。

http://www.appelsiini.net/2012/lazyload-170

或者，如果你不想使用这个插件，你可以将src值存储在data-*属性中，只在你想显示它时将其附加到src。

隐藏时：

$(image).data("src", $(image).attr("src"));
$(image).removeAttr("src");
$(image).hide();

显示时：

$(image).attr("src", $(image).data("src"));
$(image).show();

您可以简单地隐藏图像。如果你不想去那里，你可以创建一个1px的图像，然后：

$(image).attr('src', '1px.png');

如果您想隐藏图像，但要占用其空间并不影响容器的滚动条，请使用visibility: hidden样式：

$(image).css('visibility', 'hidden');

您可以简单地从此代码中删除图像。我试过了。

$('.img2').dblclick(function()
{
    $(".img2").removeAttr('src');
});

下面的代码显示了我是如何删除图像源的

 var image_holder = $("#preview-image-holder");
 image_holder.empty();
相关文章：