Image Prefetch Test

Return to Article

Hover each box to see if the background image appears immediately, or if it has to load first. Use a force-refresh to test it again.


prefetch
non-prefetch

Source

<head>

  <link rel="prefetch" href="http://farm3.staticflickr.com/2115/2420997341_2a027f601b_o.jpg">

  <style>
    .prefetch, .non-prefetch {
      float: left;
      margin: 3em;
      padding: 6em;
      border: 1px solid #cccccc;
      cursor: pointer; }
    .prefetch:hover {
      background-image: url("http://farm3.staticflickr.com/2115/2420997341_2a027f601b_o.jpg"); }
    .non-prefetch:hover {
      background-image: url("http://farm2.staticflickr.com/1376/1386985851_8958323ab0_o.jpg"); }
  </style>

</head>

<body>

  <div class="prefetch">prefetch</div>

  <div class="non-prefetch">non-prefetch</div>

</body>