-
Notifications
You must be signed in to change notification settings - Fork 1
/
img-omg.js
40 lines (34 loc) · 1.24 KB
/
img-omg.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
document.addEventListener('DOMContentLoaded', function () {
'use strict';
var images = document.querySelectorAll('img');
for (var i = images.length; i--;) {
getReplacement(images[i]);
images[i].dataset.orginalImage = images[i].getAttribute('src');
if ('ontouchstart' in window) {
images[i].addEventListener('touchstart', replaceImage);
images[i].addEventListener('touchend', restoreImage);
} else {
images[i].addEventListener('mouseenter', replaceImage);
images[i].addEventListener('mouseleave', restoreImage);
}
}
function getReplacement(image) {
var request = new XMLHttpRequest();
request.open('GET', 'https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cat', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
image.dataset.gif = data.data.image_original_url;
// Preload, ya know
new Image().src = data.data.image_original_url;
}
};
request.send();
}
function replaceImage(e) {
e.target.setAttribute('src', e.target.dataset.gif);
}
function restoreImage(e) {
e.target.setAttribute('src', e.target.dataset.orginalImage);
}
});