|
Сообщение от Fesali
|
|
она грузится долго
|
не долго а только когда сработает скрипт , сделайте прелоад этой картинки в head, вынесите из скрипта
вот так
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.mask.hide{
opacity: 0;
}
.mask{
transition:opacity .8s;
}
</style>
<script>(function(){
var mask = document.createElement('img');
mask.src = "centerblur.png";
var width = 0;
var height = 0;
window.addEventListener('load', function(ev){
var imagecanvas = document.createElement('canvas');
var imagecontext = imagecanvas.getContext('2d');
var images = document.querySelectorAll('.mask');
var all = images.length;
while (all--) {
var img = images[all];
width = img.offsetWidth;
height = img.offsetHeight;
imagecanvas.width = width;
imagecanvas.height = height;
imagecontext.drawImage(mask, 0, 0, width, height);
imagecontext.globalCompositeOperation = 'source-atop';
imagecontext.drawImage(img, 0, 0);
img.src = imagecanvas.toDataURL();
img.classList.remove('hide')
}
}, false);
})();</script>
</head>
<body>
<img src="preload.png" alt="" class="mask hide" >
</body>
</html>