5

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

我想

$(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")
4

7 回答 7

4

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

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

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

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');

这也将使节点和图像宽度/高度保持在原位。

但我高度怀疑这是否会在您的情况下带来任何性能提升，最好的办法是不要给浏览器带来太多数据压力。

适用于 iPad 的 iOS（尤其是 4.x 版）以内存限制低而著称，如果您留下太多 IMG 节点，很容易崩溃。

于 2012-09-06T09:22:46.323 回答
3

如果您的问题是性能，那么您可以使用预先存在的延迟加载 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();
于 2012-09-06T08:58:17.980 回答
2

要隐藏图像：

$(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();
于 2012-09-06T08:59:24.130 回答
1

如果您想隐藏图像，但在占用空间且不影响容器滚动条的情况下将其保持在原位，请使用visibility: hidden样式：

$(image).css('visibility', 'hidden');
于 2012-09-06T09:03:44.070 回答
1

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

$(image).attr('src', '1px.png');
于 2012-09-06T08:59:28.293 回答
0

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

$('.img2').dblclick(function()
{
    $(".img2").removeAttr('src');
});
于 2017-03-10T06:28:22.417 回答
-1

以下代码显示了我如何能够删除图像源

 var image_holder = $("#preview-image-holder");
 image_holder.empty();
于 2020-03-04T18:29:22.977 回答