66 lines
1.5 KiB
JavaScript
Executable file
66 lines
1.5 KiB
JavaScript
Executable file
function createElement(type, callback) {
|
|
var element = document.createElement(type);
|
|
|
|
callback(element);
|
|
|
|
return element;
|
|
}
|
|
|
|
function freezeGif(img) {
|
|
var width = img.width,
|
|
height = img.height,
|
|
canvas = createElement('canvas', function(clone) {
|
|
clone.width = width;
|
|
clone.height = height;
|
|
}),
|
|
attr,
|
|
i = 0;
|
|
|
|
var freeze = function() {
|
|
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
|
|
|
|
for (i = 0; i < img.attributes.length; i++) {
|
|
attr = img.attributes[i];
|
|
|
|
if (attr.name !== '"') {
|
|
canvas.setAttribute(attr.name, attr.value);
|
|
}
|
|
}
|
|
|
|
canvas.style.position = 'absolute';
|
|
|
|
img.parentNode.insertBefore(canvas, img);
|
|
img.style.opacity = 0;
|
|
img.style.visibility = 'hidden';
|
|
canvas.style.visibility = 'visible';
|
|
canvas.style.opacity = 1;
|
|
|
|
img.parentNode.addEventListener('mouseover', function() {
|
|
img.style.opacity = 1;
|
|
img.style.visibility = 'visible';
|
|
canvas.style.visibility = 'hidden';
|
|
canvas.style.opacity = 0;
|
|
});
|
|
img.parentNode.addEventListener('mouseout', function() {
|
|
img.style.opacity = 0;
|
|
img.style.visibility = 'hidden';
|
|
canvas.style.visibility = 'visible';
|
|
canvas.style.opacity = 1;
|
|
});
|
|
};
|
|
|
|
if (img.complete) {
|
|
freeze();
|
|
} else {
|
|
img.addEventListener('load', freeze, true);
|
|
window.addEventListener('resize', freeze, true);
|
|
}
|
|
}
|
|
|
|
function freezeAllGifs() {
|
|
return new Array().slice
|
|
.apply(document.querySelectorAll('[data-type-gif]'))
|
|
.map(freezeGif);
|
|
}
|
|
|
|
freezeAllGifs();
|