diff options
Diffstat (limited to 'vendor/desandro/imagesloaded/sandbox/background')
-rw-r--r-- | vendor/desandro/imagesloaded/sandbox/background/css/background.css | 29 | ||||
-rw-r--r-- | vendor/desandro/imagesloaded/sandbox/background/index.html | 51 |
2 files changed, 80 insertions, 0 deletions
diff --git a/vendor/desandro/imagesloaded/sandbox/background/css/background.css b/vendor/desandro/imagesloaded/sandbox/background/css/background.css new file mode 100644 index 000000000..509966a7d --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/background/css/background.css @@ -0,0 +1,29 @@ +.box { + width: 300px; + height: 300px; + margin: 0 20px 20px 0; + border: 1px solid; + display: inline-block; +} + +.orange-tree { + background: url('http://i.imgur.com/bwy74ok.jpg'); + background-size: cover; +} + +.thunder-cloud { + background: url('../../../test/img/thunder-cloud.jpg'); + background-size: contain; +} + +.multi1 { + background: + url("http://i.imgur.com/ZAVN3.png"), + url('http://i.imgur.com/6UdOxeB.png') bottom right, + url(http://i.imgur.com/LkmcILl.jpg); + background-size: cover; +} + +.blue { + background: #09F; +}
\ No newline at end of file diff --git a/vendor/desandro/imagesloaded/sandbox/background/index.html b/vendor/desandro/imagesloaded/sandbox/background/index.html new file mode 100644 index 000000000..853f8ff35 --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/background/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + + <title>background</title> + + <!-- put in separate folder so JS path is different from CSS path --> + <link rel="stylesheet" href="css/background.css" > + +</head> +<body> + + <h1>background</h1> + +<div class="box orange-tree"></div> + +<div class="box thunder-cloud"></div> + +<div class="box multi1"></div> + +<div class="box blue"></div> + +<script src="../../bower_components/ev-emitter/ev-emitter.js"></script> +<script src="../../imagesloaded.js"></script> +<script> + +var imgLoad0 = imagesLoaded( '.orange-tree', { background: true }, function() { + console.log('orange tree bg images loaded', imgLoad0.images.length ); +}); + +var imgLoad1 = imagesLoaded( '.thunder-cloud', { background: true }, function() { + console.log('thunder cloud bg images loaded', imgLoad1.images.length); +}); + +var imgLoad2 = imagesLoaded( '.multi1', { background: true }, function() { + console.log('multi1 bg images loaded', imgLoad2.images.length); +}); + +var imgLoad3 = imagesLoaded( '.box', { background: true }, function() { + console.log('.box bg images loaded', imgLoad3.images.length); +}); +imgLoad3.on('progress', function( instance, image, element ) { + console.log( 'progress on .box', image.img.src, element.className ); +}); + +</script> + +</body> +</html> |