Skip to content

Instantly share code, notes, and snippets.

@aligator28

aligator28/js image preloading

Created October 31, 2016 16:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aligator28/b5d7743da0de8902383a706cf6aa7de2 to your computer and use it in GitHub Desktop.
Save aligator28/b5d7743da0de8902383a706cf6aa7de2 to your computer and use it in GitHub Desktop.
Download ZIP
Images preloading javascript (предзагрузка изображений js)
Raw
js image preloading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotate Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row" id="img1"></div>
<div class="row" id="img2"></div>
<div class="row" id="img3"></div>
<div class="row" id="img4"></div>
<div class="row" id="img5"></div>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
function preloadImg(containerId, imgUrl) {
var cont = $('#' + containerId);
var i = new Image();
i.onload = function () {
cont.append(this);
cont.fadeIn('slow');
};
i.src = imgUrl;
}
var images = {
'img1': 'http://loremflickr.com/200/300/girl',
'img2': 'img/2girl.jpg',
'img3': 'img/3girl.jpg',
'img4': 'img/4girl.jpg',
'img5': 'img/5girl.jpg',
};
$.each(images, function (key, val) {
preloadImg(key, val);
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment