之前：

Question

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

注意：有修复5张图片（非动态）

我不想使用JavaScript预装图像任何解决方案？

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

Answer 1

HTML5通过link prefetching提供了一种新方法。

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

只需在HTML中添加许多link个代码，您就可以了。当然，旧浏览器不会以这种方式加载内容。

注意以上代码不适用于Apple Safari Safari不支持预取现在版本12 https://caniuse.com/#search=prefetch

<强>更新

如果您的服务器使用HTTP2，您还可以在回复中使用HTTP2 Server Push添加Link标头。

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

Answer 2

无需预先加载图像。我无法理解为什么99％的人认为，悬停效果必须使用2张图像。没有这样的需求，使用2个图像使它看起来很糟糕。我知道唯一的好解决方案是使用CSS作为A元素（或简单的JS用于所有其他按钮）。当按钮我们徘徊时，将背景位置设置为某个偏移量。

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

就是这样，您可以看到以下图片：

_{（来源：margonem.pl）}

编辑：您也可以以其他方式使用它。您可以隐藏图像，而不是切换图像。所以起点是“background-position：0 -100px”，悬停在“0 0”。

这种技术称为CSS精灵 - 这里有很好的描述：http://css-tricks.com/css-sprites/

Answer 3

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

}

Answer 4

我还没有看到这里提到的一种技术，如果您不需要担心IE6＆amp; 7，使用:after伪选择器将图像content添加到页面上的元素。以下代码取自this article：

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

与使用JavaScript预加载图像相比，我能看到的唯一缺点就是没有简单的方法可以从内存中释放它们。

Answer 5

您可以使用隐藏的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文件。

Answer 6

在隐形img标签中引用您的图片。加载页面时，它们也会下载。

Answer 7

由于我不确定是否加载了隐藏的图像，因此您可能希望使用image sprites。然后在显示任何内容之前加载整个图像。您甚至可以将所有菜单项放在一个映像中，从而节省大量HTTP请求。

Answer 8

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

之前：

class Input extends React.Component {

  refCallback(inp){
    if(this.props.autofocus) inp.focus();
  }

  render(){
    let input = ''

    if (this.props.type === 'date') {
      input = (
        <MaskedInput
          ref={this.refCallback}
          onChange={this.props.onChange}
          mask="11/11/1111"
          placeholder={this.props.placeholder}
        />
      )
    } else {
      input = (
        <input
          ref={this.refCallback}
          onChange={this.props.onChange}
          id={this.props.id}
          placeholder={this.props.placeholder}
          type={this.props.type}
        />
      )
    }

    return (
      <div>
        <label htmlFor={this.props.id}>{this.props.label}</label>
        <br />
        {input}
      </div>
    )
  }
}

export default Input

后：

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

注意第一个（之前）冻结页面并以非常难看的方式闪烁，而第二个（之后）预装的内容不会冻结页面或闪烁，而是立即显示并立即消失

Answer 9

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

Answer 10

long ftoint(float x)
{
    unsigned int e = (0x7F + 31) - ((* (unsigned int*) &x & 0x7F800000) >> 23);
    unsigned int m = 0x80000000 | (* (unsigned int*) &x << 8);
    return int((m >> e) & -(e < 32));
}

当我们想为 CSS 尽早加载图像时，这对我来说效果最好（而 rel="prefetch" 会导致 CSS 重复加载）

如何在没有Javascript的情况下预加载图像？

10 个答案:

之前：

后：