Question

是否有一种方法可以使用javascript / jquery来防止加载图像？我正在从带有图像的html列表中构建幻灯片。所以我想收集所有src数据，然后阻止图像加载。因此，当用户真正需要图像时，我会加载它。

我在google上发现了一些延迟加载脚本，但无法找到阻止图片加载的方式。

提前致谢。

EDIT1：
从答案中可以看出，不可能使用javascript来阻止图像加载。 Here是一个延迟加载的脚本。谁有人解释它是如何工作的？似乎当javascript关闭时它只是正常加载图像，当它打开时它会在你滚动到它们的位置时加载它们。

Answer 1

您可以将图像包装在noscript标记中：

<noscript>
<img src="foo.jpg"/>
</noscript>

所有启用了JavaScript的浏览器都会忽略图片代码，因此无法加载图片。

Answer 2

如果您在页面上呈现HTML，即使它已隐藏，也会加载。如果您希望图像仅在需要时加载，则您必须在javascript中动态设置图像标记上的源（src）。

编辑1：您引用的脚本仅检查您向下滚动页面的距离，然后通过检查其顶部来确定哪些图像可见（或几乎可见） - 请参阅$ .belowthefold和$ .rightoffold扩展。

当图像大小相同时，该示例效果很好，因为它们的容器也可以是相同的大小，并且在延迟加载它们时不会得到任何奇怪的页面大小调整行为。如果您的图像的高度和宽度不同，您可能会得到一些奇怪的结果。

编辑2：

<script type="text/javascript" charset="utf-8">
    $(document).ready( function() { $("img").removeAttr("src"); } );
</script>

<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />

Answer 3

将URL存储在其他位置，然后将所有图像URL设置为某个虚拟图像（空，透明，“加载数据......”，等等）。当应该显示图像时，使用JS设置src属性，浏览器将获取它。

Answer 4

使用Prototype你可以做到这样的事情我想：

var unloaded = [];
$$('img.noload').each(function (image) {
    unloaded.push(image);
    image._src = image.src;
    image.src = '';
});

加载所有这些：

unloaded.each(function (image) {
    image.src = image._src;
});

加载第一个：

function loadImage (image) {
    image.src = image._src;
}

loadImage(unloaded.shift());

嗯，我希望你有这个想法。

Answer 5

只是不要在原始HTML中包含img标记，然后根据需要使用DHTML动态生成它。您还可以在img标记中放置一个假网址，然后动态替换为真实的网址。

旁注 - 重点是什么。你要做的就是在现有的基础上构建另一种缓存机制。将缓存留给浏览器，他们非常擅长这个

Answer 6

您可以使用以下部分用虚拟文件替换所有图像标签（例如，1x1透明gif）。 url存储在一个数组中供以后参考。

$(document).ready(function(){
    var images = new Array();
    $("img").each(function(i){
      images[i] =  this.src;
       this.src='blank.gif';
    });
});

Answer 7

这个article显示了在一组标准浏览器上使用css background和img标签的一些测试。

根据我的个人经验，Scott Jehl的PictureFill是我用来处理移动设备图像分辨率和尺寸的最佳解决方案。

Answer 8

我不推荐这个解决方案，原因很多（如果你没有启用Javascript就会破坏你的页面，屏幕阅读器等），但它有可能......

您可以更改IMG标记，以便劫持不同的属性，例如ALT（LONGDESC或TITLE）：

然后使用Javascript根据需要使用ALT值更新SRC属性。

这是一种方式，而不是一种好方法。我认为唯一真正的方法是根据需要通过Javascript动态生成正确的IMG标记，而不是使用HTML发布它（这也会对非JS浏览器产生影响等）

Answer 9

我知道这是一个老问题，但我花了一段时间才弄清楚如何实现我想要的目标。这是DuckDuckGo的最佳成绩，所以我认为值得发布在这里。

这个小片段会阻止imgs，embeds和iframe被加载，并会在以后需要时手动加载它们。需要注意的是：加载太快而JQuery / JavaScript无法捕获它们的对象仍然被加载，脚本仍然会删除它们。由于这是为了减少加载时间，这应该不是问题。

Fiddle

loadObjects = function() {
  /* LOAD OBJECTS */
  $("img, embed, iframe").each(function() {
    var obj = $(this);

    obj.attr("src", obj.data("objsrc")).ready(function() {
      obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
        $(this).remove();
      });
    });
  });
}

$(document).ready(function() {
    /* *** PREVENT OBJECTS FROM LOADING *** */
    $("img, embed, iframe").each(function() {
        var obj = $(this);
        obj.data("objsrc", obj.attr("src"));
        obj.hide().attr("src", "").before("<span class=\"loading\"></span>");
    });
});

Answer 10

您还可以将图像包装在模板标签中：

<template>
  <img src="foo.jpg"/>
</template>

浏览器不会尝试加载它。

Answer 11

通过 insertAdjacentHTML（）可以很容易地解决这个问题，它可以让你在喜欢的时候添加HTML，在这种情况下点击按钮：

function LoadImages(){

 document.body.insertAdjacentHTML('afterEnd','<img src="one.jpg" alt="" height="100" width="100"> <img src="two.jpg" alt="" height="100" width="100">');

}

HTML ...

<button onclick="LoadImages();">Click to load images</button>

防止图像加载

11 个答案: