防止加载图像
有没有一种方法与JavaScript / jQuery的，以防止图像加载？ 我正在build立一个幻灯片从一个HTML列表与图像。 所以我想收集所有的src数据，然后防止加载图像。 所以后来当用户真的需要图像时，我会加载它。
我在谷歌上find了一些懒惰的加载脚本，但找不到防止加载图片的方式。
提前致谢。
EDIT1：
从答案看来，它不可能使用JavaScript来防止加载图像。 这是一个延迟加载的脚本。 有谁可以解释它是如何工作的？ JavaScript似乎closures它只是正常加载图像，当它打开它会加载他们，当你滚动到他们的位置。
如果您在页面上呈现HTML，即使它隐藏，也会加载。 如果你只想在需要的时候加载图片，你必须在javascript中dynamic地设置图片标签的源代码（src）。
编辑1：你引用的脚本只是检查你已经滚动页面多远，然后通过检查它们的顶部来确定哪些图像可见（或几乎可见），请参阅$ .belowthefold和$ .rightoffold扩展。
当图像的大小相同时，这个例子很好用，因为它们的容器也可以是相同的大小，当你懒加载它们的时候你不会得到奇怪的页面大小调整行为。 如果你的图像的高度和宽度有所不同，你可能会得到一些奇怪的结果。
编辑2：
http://home.langdonx.com:8000/demos/js/prevent_loading.html
<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" /> 您可以将图像封装在noscript标签中：
<noscript> <img src="foo.jpg"/> <noscript>
所有启用了JavaScript的浏览器都将忽略图片标签，因此图片无法加载。
将URL存储在其他地方，然后将所有图像URL设置为一些虚拟图像（空，透明，“加载数据…”，无论如何）。 当应该显示图像时，使用JS来设置src属性，浏览器将获取它。
那么原型，你可以做这样的事情我猜：
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());
那么我希望你有这个想法。
本文将展示一些在一组标准浏览器上同时使用css background和img标签的testing。
根据我个人的经验，Scott Jehl的PictureFill是我用来处理移动设备图像分辨率和尺寸的最佳解决scheme。
只是不要在您的原始HTML中包含img标签，在您需要的时候使用DHTML即时生成它。 你也可以在img标签中join一个伪造的url，并用真实的标签replace它。
在旁边注意 – 有什么意义。 你所要做的就是在现有的机制上build立另一个caching机制。 将caching留给浏览器，它们在这方面相当不错
您可以使用下面的部分用一个虚拟文件replace所有图像标签（例如，1×1透明GIF）。 这个url被存储在一个数组中供以后参考。
$(document).ready(function(){ var images = new Array(); $("img").each(function(i){ images[i] = this.src; this.src='blank.gif'; }); });
我不推荐这个解决scheme，因为很多原因（比如，如果你没有启用Javascript，屏幕阅读器等，它会毁掉你的页面），但是它有可能…
您可以更改IMG标记，以便劫持一个不同的属性，如ALT（LONGDESC或TITLE）：
然后使用Javascript来根据需要更新ALT值的SRC属性。
所以这是一种方式，而不是一个好的。 我认为唯一真正的方法是根据需要通过Javascriptdynamic生成正确的IMG标记，而不是使用HTML发布（这对非JS浏览器等也有影响）
我知道这是一个古老的问题，但是花了我一段时间才弄清楚如何完成我想要的。 这是DuckDuckGo上最好的结果，所以我觉得值得在这里发表。
这个小片段将阻止加载imgs，embedded和iframe，并在需要时手动加载它们。 一个警告：加载速度过快的JQuery / JavaScript来捕捉它们的对象仍然被加载，脚本仍然会将其删除。 由于这是为了减less加载时间，这不应该是一个问题，但。
小提琴
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>"); }); });
