Skip to content

Instantly share code, notes, and snippets.

@BramEsposito
Created September 13, 2016 09:23
Show Gist options
  • Save BramEsposito/b9c9b04d0ba57e47da039e488877327f to your computer and use it in GitHub Desktop.
Save BramEsposito/b9c9b04d0ba57e47da039e488877327f to your computer and use it in GitHub Desktop.
Run this script as a bookmarklet or in your console to detect if you have oversized background images on your page
(function() {
// the minimum version of jQuery we want
var v = "1.3.2";
// check prior inclusion and version
if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
var done = false;
var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
done = true;
initMyBookmarklet();
}
};
document.getElementsByTagName("head")[0].appendChild(script);
} else {
initMyBookmarklet();
}
function initMyBookmarklet() {
(window.myBookmarklet = function() {
jQuery('*').filter(function() {
if (this.currentStyle)
return this.currentStyle['backgroundImage'] !== 'none';
else if (window.getComputedStyle)
return document.defaultView.getComputedStyle(this, null)
.getPropertyValue('background-image') !== 'none';
}).each(function() {
var imageSrc = this.style
.backgroundImage
.replace(/url\((['"])?(.*?)\1\)/gi, '$2')
.split(',')[0];
var image = new Image();
image.src = imageSrc;
var width = image.width,
height = image.height;
if (width != 0 && height != 0) {
// calculate percentages
var pctw = Math.ceil(this.clientWidth / width * 100);
var pcth = Math.ceil(this.clientHeight / height * 100);
console.log(imageSrc + " " + pctw + "% x " + pcth + "%");
}
});
})();
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment