如何预加载图像没有Javascript？ [英] How to Preload Images without Javascript?

问题描述

在我的布局中，有一些大图像（来自XML），当我将鼠标悬停在某些链接上时显示，但当页面加载时以及当我滚动时，需要时间加载该图像。

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.

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

Note: there are fix 5 images (not dynamic)

我不想使用JavaScript预载图片的任何解决方案？

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

我不使用悬停菜单或类似的东西，但这张图片是产品图片和链接是文本链接得到我的观点??

推荐答案

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

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

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

}

这篇关于如何预加载图像没有Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！