在My Layout中有一些大图像（来自XML），当我将鼠标悬停在某些链接上时会显示这些大图像，但是当页面加载时以及滚动时需要时间加载该图像。如何预加载图像没有JavaScript？

注：有修复5个图像（非动态）

我不想使用JavaScript来预先载入图像的任何解决方案？

我没有使用悬停菜单或类似的东西，但这张图片是产品图片和链接是文字链接得到了我的观点？

来源

2009-05-04 Wasim Shaikh

@tharkun这是如何重复。那些是“与”;这是“没有”。 – 2009-05-04 09:17:52

woa，我的坏！ steretypes！抱歉！ – markus 2009-05-04 09:20:31

请参阅 - http://stackoverflow.com/q/1373142/104380 – vsync 2014-01-10 20:29:46

从http://snipplr.com/view/2122/css-image-preloader

一个低技术含量，但有用的技术，只使用CSS。将css放入样式表后，将其插入页面主体标记的下方：无论何时在整个页面中引用图像，它们现在都将从缓存中加载。

#preloadedImages 
{ 
    width: 0px; 
    height: 0px; 
    display: inline; 
    background-image: url(path/to/image1.png); 
    background-image: url(path/to/image2.png); 
    background-image: url(path/to/image3.png); 
    background-image: url(path/to/image4.png); 
    background-image: url(); 

}

来源

2009-05-04 11:56:53

非常感谢AZIZ。这对Preload来说是非常好的解决方案。仍希望有更多的解决方案。然后关闭答案， – 2009-05-04 13:50:19

+13

这大多数DEFINITLY不起作用。只有最后一个空的url（）被解析。 – vsync 2011-12-07 12:33:55

太棒了!!!!!!!!!!! – SpaceDog 2014-01-06 22:47:29

引用你的图像在不可见的img标签。而页面加载他们也会下载。

来源

2009-05-04 09:00:28 Canavar

您不能将它们作为<img />标记添加到您的页面并使用css隐藏它们吗？

来源

2009-05-04 09:01:16 Peter

=滞后（在某些浏览器中） – 2017-04-21 23:46:07

你可以使用一个隐藏的div来放置图像。像这样

<html> 
<body> 
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden"> 
    <img src="img1.jpg" /><img src="img2.jpg" /> 
</div> 
<div>Some html</div> 
</body> 
</html>

这仅适用于影像作品虽然，即。如果你想为.swf文件做同样的事情，会出现问题。如果不可见，Firefox不会运行.swf文件。

来源

2009-05-04 09:03:43

您是否也需要显示：无可见性仍会占用空间？但我也相信，有些浏览器在显示之前不会加载隐藏的图像。 – 2009-05-04 09:17:12

这真是很好的解决方案，我们也可以使用position绝对和;高度：0在CSS中，不是吗？ – 2009-05-04 09:28:28

如果它隐藏时未加载，也许它会帮助有一些“可见”跨度/ div高度0与style =“background：url（imgx.jpg）”？只是一个想法...不知道它是否有帮助或工作：p – Svish 2009-05-04 09:32:27

没有必要预载图像。我不明白为什么99％的人认为，悬停效果必须使用2张图片。没有这种需要，使用2张图像会使它看起来很糟糕。我知道的唯一好的解决方案是使用CSS的A元素（或简单JS的所有其他按钮）。当我们按下我们将设置的背景位置悬停到某个偏移位置。

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); } 
a:hover { background-position:0 26px }

这一切，使用的图像下面可以看到：

alt text http://www.margonem.pl/img/b_tagsdesc.png

编辑：您还可以用它其他方式。而不是切换图像，你可以隐藏你的图像。所以起点将是“背景位置：0 -100像素”和悬停“0 0”。

这种技术被称为CSS精灵 - 这是它很好的说明：http://css-tricks.com/css-sprites/

来源

2009-05-04 09:12:18 Thinker

我不能强调这一点。这是（唯一）的方法。 – Kriem 2009-05-04 18:17:52

谢谢..的解释 – 2009-05-05 04:51:46

漂亮的紧凑型样本。以这种方式帮助我做了很多事情。 – Marc 2012-06-21 11:10:32

正如我不知道是否隐藏图像加载，你可能会想使用image sprites。然后在显示任何内容之前加载整个图像。您甚至可以将所有菜单项放在一个图像中，因此可以节省大量的HTTP请求。

来源

2009-05-04 09:20:44

的技术，我没有看到这里没有提到，如果你并不需要担心IE6 & 7伟大的工程，是使用:after伪选择将图像添加为content到页面上的一个元素。下面的代码从this article解禁：

body:after { 
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg); 
    display: none; 
}

我可以看到这与使用JavaScript来预载的图片唯一的缺点是，有没有简单的方法来从内存中释放出来。

来源

2012-07-08 18:01:57

这是答案，唯一正确的做法。 – vsync 2013-01-17 23:38:21

虽然这个_mostly_有效，但某些浏览器（例如Opera）不会下载图像以供显示：无元素。 http://www.quirksmode.org/css/displayimg.html – 2014-08-28 11:15:58

但是，您可以在不显示任何内容的情况下将其包括在内，而是将其放在绘制区域之外：'background-position：-100px -100px;'。 – 2014-08-28 11:24:56

HTML5有一个新的方法可以做到这一点，通过link prefetching。

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

，你在你的HTML需要，你是好去只是增加了许多link标签。当然，旧版浏览器不会以这种方式加载内容。

UPDATE

如果您的服务器送达HTTP2，你也可以在你的回应中添加Link头的化妆用的HTTP2 Server Push。

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

来源

2013-09-16 17:55:54

如果预加载图像是你所寻找的，那么性能就是你想要的。我怀疑阻止页面，而资源加载是你想要的。所以，只需将一些预取链接放在主体的末端，并将伪造媒体添加到它们中，以使它们看起来不重要（以便在其他所有内容之后加载它们）。然后，将onload标签添加到这些链接中，并且在这个onload中将会设置页面中实际资源来源的代码。例如，这甚至可以与动态iframe结合使用。

前：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

后：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe> 
 
<link rel="prefetch" href="http://jquery.com/" 
 
     onload="myFrame.src=this.href" media="bogus" />

通知的第一个（前）如何冻结了该页面，并在闪烁一个非常丑陋的方式，而第二个（之后）内容预装不会冻结页面或眨眼，而是它会立即出现和消失。

来源

2017-04-21 01:22:28

如何预加载图像没有JavaScript？

回答

前：

后：

相关问题