Skip to content

Instantly share code, notes, and snippets.

Created Dec 12, 2016
What would you like to do?
easy script for ai2html files
// easy script for ai2html files
// ai2html uses css's display block/in-line to show correct artboards depending on screen size.
// if we not use some script like this one or a lazy load plugin our reader will download one png file for each artboard although he is not seeing it.
// function that manage every time the screen is resized. Avoids to call 'checkimages' function multiples times.
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
// check what div is hidden and what doesnt.
function isHidden(el) {
return el.offsetWidth > 0;
// function changes the data-src attribute to src forcing to downloading the correct image.
function checkImages(){
var imagesArray = document.querySelectorAll(".g-aiImg");
for (var i in imagesArray) {
if (isHidden(imagesArray[i])) {
imagesArray[i].src = imagesArray[i].getAttribute("data-src");
//event listeners
document.addEventListener('DOMContentLoaded', checkImages);
window.addEventListener('resize', debounce(checkImages, 300));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment