first commit
This commit is contained in:
216
wp-content/themes/cyber/assets/js/jquery.waitforimages.js
Normal file
216
wp-content/themes/cyber/assets/js/jquery.waitforimages.js
Normal file
@@ -0,0 +1,216 @@
|
||||
;(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// CommonJS / nodejs module
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
// Namespace all events.
|
||||
var eventNamespace = 'waitForImages';
|
||||
|
||||
// CSS properties which contain references to images.
|
||||
$.waitForImages = {
|
||||
hasImageProperties: [
|
||||
'backgroundImage',
|
||||
'listStyleImage',
|
||||
'borderImage',
|
||||
'borderCornerImage',
|
||||
'cursor'
|
||||
],
|
||||
hasImageAttributes: ['srcset']
|
||||
};
|
||||
|
||||
// Custom selector to find all `img` elements with a valid `src` attribute.
|
||||
$.expr[':']['has-src'] = function (obj) {
|
||||
// Ensure we are dealing with an `img` element with a valid
|
||||
// `src` attribute.
|
||||
return $(obj).is('img[src][src!=""]');
|
||||
};
|
||||
|
||||
// Custom selector to find images which are not already cached by the
|
||||
// browser.
|
||||
$.expr[':'].uncached = function (obj) {
|
||||
// Ensure we are dealing with an `img` element with a valid
|
||||
// `src` attribute.
|
||||
if (!$(obj).is(':has-src')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !obj.complete;
|
||||
};
|
||||
|
||||
$.fn.waitForImages = function () {
|
||||
|
||||
var allImgsLength = 0;
|
||||
var allImgsLoaded = 0;
|
||||
var deferred = $.Deferred();
|
||||
|
||||
var finishedCallback;
|
||||
var eachCallback;
|
||||
var waitForAll;
|
||||
|
||||
// Handle options object (if passed).
|
||||
if ($.isPlainObject(arguments[0])) {
|
||||
|
||||
waitForAll = arguments[0].waitForAll;
|
||||
eachCallback = arguments[0].each;
|
||||
finishedCallback = arguments[0].finished;
|
||||
|
||||
} else {
|
||||
|
||||
// Handle if using deferred object and only one param was passed in.
|
||||
if (arguments.length === 1 && $.type(arguments[0]) === 'boolean') {
|
||||
waitForAll = arguments[0];
|
||||
} else {
|
||||
finishedCallback = arguments[0];
|
||||
eachCallback = arguments[1];
|
||||
waitForAll = arguments[2];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Handle missing callbacks.
|
||||
finishedCallback = finishedCallback || $.noop;
|
||||
eachCallback = eachCallback || $.noop;
|
||||
|
||||
// Convert waitForAll to Boolean
|
||||
waitForAll = !! waitForAll;
|
||||
|
||||
// Ensure callbacks are functions.
|
||||
if (!$.isFunction(finishedCallback) || !$.isFunction(eachCallback)) {
|
||||
throw new TypeError('An invalid callback was supplied.');
|
||||
}
|
||||
|
||||
this.each(function () {
|
||||
// Build a list of all imgs, dependent on what images will
|
||||
// be considered.
|
||||
var obj = $(this);
|
||||
var allImgs = [];
|
||||
// CSS properties which may contain an image.
|
||||
var hasImgProperties = $.waitForImages.hasImageProperties || [];
|
||||
// Element attributes which may contain an image.
|
||||
var hasImageAttributes = $.waitForImages.hasImageAttributes || [];
|
||||
// To match `url()` references.
|
||||
// Spec: http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
|
||||
var matchUrl = /url\(\s*(['"]?)(.*?)\1\s*\)/g;
|
||||
|
||||
if (waitForAll) {
|
||||
|
||||
// Get all elements (including the original), as any one of
|
||||
// them could have a background image.
|
||||
obj.find('*').addBack().each(function () {
|
||||
var element = $(this);
|
||||
|
||||
// If an `img` element, add it. But keep iterating in
|
||||
// case it has a background image too.
|
||||
if (element.is('img:has-src') &&
|
||||
!element.is('[srcset]')) {
|
||||
allImgs.push({
|
||||
src: element.attr('src'),
|
||||
element: element[0]
|
||||
});
|
||||
}
|
||||
|
||||
$.each(hasImgProperties, function (i, property) {
|
||||
var propertyValue = element.css(property);
|
||||
var match;
|
||||
|
||||
// If it doesn't contain this property, skip.
|
||||
if (!propertyValue) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Get all url() of this element.
|
||||
while (match = matchUrl.exec(propertyValue)) {
|
||||
allImgs.push({
|
||||
src: match[2],
|
||||
element: element[0]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$.each(hasImageAttributes, function (i, attribute) {
|
||||
var attributeValue = element.attr(attribute);
|
||||
var attributeValues;
|
||||
|
||||
// If it doesn't contain this property, skip.
|
||||
if (!attributeValue) {
|
||||
return true;
|
||||
}
|
||||
|
||||
allImgs.push({
|
||||
src: element.attr('src'),
|
||||
srcset: element.attr('srcset'),
|
||||
element: element[0]
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// For images only, the task is simpler.
|
||||
obj.find('img:has-src')
|
||||
.each(function () {
|
||||
allImgs.push({
|
||||
src: this.src,
|
||||
element: this
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
allImgsLength = allImgs.length;
|
||||
allImgsLoaded = 0;
|
||||
|
||||
// If no images found, don't bother.
|
||||
if (allImgsLength === 0) {
|
||||
finishedCallback.call(obj[0]);
|
||||
deferred.resolveWith(obj[0]);
|
||||
}
|
||||
|
||||
$.each(allImgs, function (i, img) {
|
||||
|
||||
var image = new Image();
|
||||
var events =
|
||||
'load.' + eventNamespace + ' error.' + eventNamespace;
|
||||
|
||||
// Handle the image loading and error with the same callback.
|
||||
$(image).one(events, function me (event) {
|
||||
// If an error occurred with loading the image, set the
|
||||
// third argument accordingly.
|
||||
var eachArguments = [
|
||||
allImgsLoaded,
|
||||
allImgsLength,
|
||||
event.type == 'load'
|
||||
];
|
||||
allImgsLoaded++;
|
||||
|
||||
eachCallback.apply(img.element, eachArguments);
|
||||
deferred.notifyWith(img.element, eachArguments);
|
||||
|
||||
// Unbind the event listeners. I use this in addition to
|
||||
// `one` as one of those events won't be called (either
|
||||
// 'load' or 'error' will be called).
|
||||
$(this).off(events, me);
|
||||
|
||||
if (allImgsLoaded == allImgsLength) {
|
||||
finishedCallback.call(obj[0]);
|
||||
deferred.resolveWith(obj[0]);
|
||||
return false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (img.srcset) {
|
||||
image.srcset = img.srcset;
|
||||
}
|
||||
image.src = img.src;
|
||||
});
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
|
||||
};
|
||||
}));
|
||||
Reference in New Issue
Block a user