QueryLoader: Fix to Pass Images With Radial-gradient

2014-04-01 JavaScript

Queryloader issue

There is no doubt, that Gaya Kessler did an awesome plugin called QueryLoader. Unfortunately, while gathering all images to be preloaded with this plugin, Gaya’s script will crash on graphic elements created with CSS3.

Function

getImages

is crawling for all background images and img tags with src attribute. When it will reach for example element with background defined as:

background-image: radial-gradient(#1559B2, #12407E);

it will crash and stop. No src means nothing to preload.

Update

Forget about below solution. Gaya did second version of QueryLoader2 – now it supports this kind of things and has more improvements.

I wrote very fast hot fix.

Open query.loader.js and around line 62 find:

if ($(this).css("background-image") != "none") {

replace it with:

if ( ($(this).css('background-image') !== 'none') && ($(this).css('background-image').toLowerCase().indexOf('radial-gradient') === -1) ) {

It will prevent from fetching background images generated with CSS3 gradients. I realize that other CSS3 phares should be applied as well but this is just a hint for anybody who will get the same problem.