Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security
Tag: preload
7 posts

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me: .preload-images { background: url(image-01.png) no-repeat -9999px -9999px; background: url(image-01.png) no-repeat -9999px -9999px, url(image-02.png) no-repeat -9999px -9999px, url(image-03.png) no-repeat -9999px -9999px, url(image-04.png) no-repeat -9999px -9999px, url(image-05.png) no-repeat -9999px -9999px; } Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all […] Continue reading »

3 Ways to Preload Images with CSS, JavaScript, or Ajax

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to […] Continue reading »

Better Image Caching with CSS

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions. Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img […] Continue reading »

A Way to Preload Images without JavaScript that is SO Much Better

Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening set of comments. Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” […] Continue reading »

Pure CSS: Better Image Preloading without JavaScript

After reading my previous article on preloading images without JavaScript1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique: /* ADD THIS TO CSS */ div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } <!– ADD THIS TO XHTML –> <div id=”preloaded-images”> <img src=”https://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”Image 01″ […] Continue reading »

CSS Throwdown: Preload Images without JavaScript

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how to do it with only two easy steps.. Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id=”preloaded-images”> <img src=”https://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”” /> <img src=”https://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”” […] Continue reading »

Preloading Images with CSS and JavaScript

Fast-loading pages reduce errors, conserve bandwidth, and please visitors. One way to decrease loading times and enhance performance involves maximizing image display efficiency. Your mantra for achieving image efficiency should be “reuse, optimize, and preload.”. While each of these methods plays an important role, this article will focus on methods for preloading images. Consult your server error logs to identify web pages that may require image help. Note: preloading images does not reduce bandwidth! It only decreases apparent load time, […] Continue reading »

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
Playing the long game.
They have weaponized the idiots.
Good software never steals focus from the user. Even during startup.
After 10 years running my own business, I still manage schedules and tasks using old school post-it notes, sometimes simple sometimes very elaborate.
You know those sites, where you're trying to just grab a quick bit of information but the page is shifting all over the place as it loads up 3 million advertisements.
Selling two of my top WordPress domains, wp-zen.com & zen-wp.com $300 for both. Aged 9 years. Drop a line if interested.
Never force your users to type out a password (or any long string of characters) by blocking the paste function. Typing long strings leads to MORE errors than simple copy/paste.