How to Preload Images without Javascript?

2019-01-08 11:37发布

站内问答 / JavaScript
1683 9 4

In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes time to Load that Image.

Note: there are fix 5 images (not dynamic)

I dont want to use JavaScript to Preload Images any Solutions?

I am Not Using Hover menu or something like that, but this Images are Product Images and the links are Text link Got my Point??

9条回答
在下西门庆
2楼-- · 2019-01-08 12:27

Can't you add them as an <img /> tag to your page and hide them using css?

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-01-08 12:32

There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad. The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.

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

That's all, image used you can see below:

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

Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".

This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
4楼-- · 2019-01-08 12:32

You could use a hidden div to put images in. Like so

<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>

This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)