How to Preload Images without Javascript?

by

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

More Related Contents:

  1. How can I make this background to see full?
  2. How to make an element width: 100% minus padding?
  3. Best way to center a on a page vertically and horizontally? [duplicate]
  4. With CSS, use “…” for overflowed block of multi-lines
  5. Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
  6. What is quirks mode?
  7. Is it possible to update non-JSF components (plain HTML) with JSF ajax?
  8. Unskewing the ends of an assortment multiple skewed images
  9. How to align two elements on the same line without changing HTML
  10. Scroll to a specific Element Using html
  11. Remove border from buttons
  12. Bootstrap 4 – Responsive cards in card-columns
  13. Apply css to AREA MAP
  14. Google bot crawling on AngularJS site with HTML5 Mode routes
  15. What’s the purpose of the HTML “nonce” attribute for script and style elements?
  16. How can I show dots (“…”) in a span with hidden overflow?
  17. How to make last cell of a row in a table occupy all remaining width
  18. How to horizontal & vertical center a div [duplicate]
  19. CSS Text underlining too long when letter-spacing is applied?
  20. How to handle HTML constraint validation pop-up using Selenium?
  21. Position fixed doesn’t work when using -webkit-transform
  22. How to auto-resize an image while maintaining aspect ratio
  23. css – inline elements ignoring line-height
  24. Apply Border-Radius To Scrollbars with CSS
  25. Export stored procedure result set to Excel in SSMS
  26. Setting max-height for table cell contents
  27. How much faster is it to use inline/base64 images for a web site than just linking to the hard file?
  28. Pseudo element not full container width when border used
  29. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  30. HTML canvas with scrollbar

Leave a Comment