Was*_*ikh 27 html javascript image-preloader
在我的一个布局中,有一些大图像(来自XML)显示当我将鼠标悬停在某些链接上时,但是当页面加载时以及何时翻转它需要时间来加载该图像.
注意:有修复5张图片(非动态)
我不想使用JavaScript预加载图像任何解决方案？
我不使用悬停菜单或类似的东西,但这个图像是产品图像,链接是文本链接得到了我的观点？
Lui*_*lin 43
HTML5有一种新方法可以做到这一点link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
只需link在HTML中添加许多标签,就可以了.当然,旧浏览器不会以这种方式加载内容.
UPDATE
如果您的服务器使用HTTP2,您还可以Link在响应中添加标头,并使用HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
Thi*_*ker 35
无需预加载图像.我无法理解为什么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
编辑:您也可以使用其他方式.您可以隐藏图像,而不是切换图像.因此起点将是"background-position:0 -100px"并且悬停为"0 0".
这种技术称为CSS精灵 - 这里有很好的描述:http://css-tricks.com/css-sprites/
Khu*_*ziz 32
来自http://snipplr.com/view/2122/css-image-preloader
一种低技术但有用的技术,仅使用CSS.将css放入样式表后,将其插入页面的body标签下方:每当在整个页面中引用图像时,它们现在将从缓存中加载.
#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();
}
And*_*ges 12
我还没有看到这里提到的一种技术,如果您不需要担心IE6和7,它的工作原理很好,就是使用:after伪选择器将图像添加content到页面上的元素中.以下代码摘自本文:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
与使用JavaScript预加载图像相比,我可以看到的唯一缺点是没有简单的方法从内存中释放它们.
Mat*_*yra 10
您可以使用隐藏的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文件.
小智 6
<link rel="preload" as="image" href="..." />
当我们想要为 CSS 提前加载图像时，这对我来说效果最好（而 rel="prefetch" 会导致 CSS 重复加载）