mandlm/WebSlider
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Delay-load images via javascript

Browse source
This commit is contained in:
Michael Mandl 2018-11-09 08:27:26 +01:00 committed by Michael Mandl
parent 9a6dd5b86d
commit 382a9896cf
3 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
static/clear.gif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 B

BIN
static/loading.gif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 673 B

19
templates/random.html
View file

@ -1,8 +1,23 @@
<html> <html>
<head> <head>
<meta http-equiv="refresh" content="{{ refresh }};url={{ url_for("random") }}"> <meta http-equiv="refresh" content="{{ refresh }};url={{ url_for("random") }}" />
<style>
img {
width: 100%;
height: 98%;
object-fit: contain;
background: url({{ url_for("static", filename="loading.gif") }}) 50% no-repeat;
}
</style>
<script>
var downloadingImage = new Image();
downloadingImage.onload = function(){
document.images[0].src = this.src;
};
downloadingImage.src = "{{ url_for("random_image") }}";
</script>
</head> </head>
<body bgcolor="black"> <body bgcolor="black">
<img src="{{ url_for("random_image") }}" style="height: 98%; width: 100%; object-fit: contain"/> <img src="{{ url_for("static", filename="clear.gif") }}" />
</body> </body>
</html> </html>