发表新帖
发表新帖

How to Preload Images without Javascript?

后端 未结
关注
9 1331
有刺的猬
有刺的猬 2020-12-01 02:48

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

相关标签:
9条回答
  • 不知归路
    2020-12-01 03:18

    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:


    (source: margonem.pl)

    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)
  • 余生分开走
    2020-12-01 03:19

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

    A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.

    #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();

}
    0 讨论(0)
  • 暖寄归人
    2020-12-01 03:19

    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)
  • 说谎
    2020-12-01 03:21

    As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.

    0 讨论(0)
  • 太阳男子
    2020-12-01 03:23

    A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:

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

    The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.

    0 讨论(0)
  • 猫巷女王i
    2020-12-01 03:24

    HTML5 has a new way to do this, by link prefetching.

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

    Just add many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.

    Note Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch

    UPDATE

    If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.

    Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
    0 讨论(0)
 看不清?
提交回复
热议问题