I am having trouble setting the location of a canvas relative to another, so I wrote the following test harness.
I would expect that the positioning specified by "top" amd "left" in the div's at the top of the harness would move the origin of the canvases relative to each other.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0; left:0; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50; left:50; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75; left:75; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input id='btn1' type="button" onClick="demoDisplay()" value="Hide canvas with display property">
<input id='btn2' type="button" onClick="demoVisibility()" value="Hide canvas with visibility property">
<input id='btn3' type="button" onClick="demoOrder()" value="Place blue over red">
</head>
<body onLoad="loadMe()">
<script>
function loadMe()
{
var canvas = document.getElementById("canvas1");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#8ed6ff');
grd.addColorStop(1,'#004cb3');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas2");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#C00');
grd.addColorStop(1,'#D00');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
var canvas = document.getElementById("canvas3");
if (canvas.getContext) { // Canvas Support
var ctx = canvas.getContext("2d");
// Work with context
var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
grd.addColorStop(0,'#00C');
grd.addColorStop(1,'#00D');
ctx.fillStyle=grd;
ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fill();
}
}
function demoVisibility()
{
btn = document.getElementById('btn2')
if (btn.value==='Hide canvas with visibility property') {
btn.value = 'Show canvas with visibility property';
document.getElementById("d2").style.visibility="hidden";
} else {
btn.value = 'Hide canvas with visibility property';
document.getElementById("d2").style.visibility="visible";
}
}
function demoDisplay()
{
btn = document.getElementById('btn1')
if (btn.value==='Hide canvas with display property') {
btn.value = 'Show canvas with display property';
document.getElementById("d1").style.display="none";
} else {
btn.value = 'Hide canvas with display property';
document.getElementById("d1").style.display="inline";
}
}
function demoOrder()
{
btn = document.getElementById('btn3')
if (btn.value==='Place blue over red') {
btn.value = 'Place red over blue';
document.getElementById("d1").style.zIndex=2;
document.getElementById("d2").style.zIndex=1;
} else {
btn.value = 'Place blue over red';
document.getElementById("d1").style.zIndex=1;
document.getElementById("d2").style.zIndex=2;
}
}
</script>
</body>
</html>
Add "px" to your style measurements. E.G top:50; => top:50px;
<form id='form1' style="position:relative">
<div id='d1' style="position:absolute; top:0px; left:0px; z-index:1">
<canvas id='canvas1' width='200' height='100'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d2' style="position:absolute; top:50px; left:50px; z-index:2">
<canvas id='canvas2' width='100' height='200'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='d3' style="position:absolute; top:75px; left:75px; z-index:3">
<canvas id='canvas3' width='50' height='50'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
I will make your life simple. Here is the javascript code for the same.
var can = document.querySelector('canvas');
can.style.position = 'absolute';
can.style.top = "100px";
can.style.left = "100px";
Well enjoy styling the page....
As a starter, your HTML is invalid. The content (HTML elements like <form>, <canvas> etc.) should be in a <body> tag inside the <html> tag! The <script> should probably be in the <head>.
Also, note that the solution is using absolute positioning within an element using relative positioning.
Related
I use bootstrap. I want the user to be able to choose the canvas size while keeping the design screen responsive within the div.
<div class="row">
<div class="col-xs-2 col-sm-2" id="border">content left</div>
<div class="col-xs-6 col-sm-6" id="border">
Width <input type="number" class="form-control"><br>
Height <input type="number" class="form-control"><br>
canvas
<canvas id="canvas" width="500" height="300">
</canvas>
</div>
<div class="col-xs-2 col-sm-2" id="border">content right</div>
How can I limit the size of the canvas to the size of the div?
I do not know if it will be necessary to use JavaScript.
Edit
It should be taken into account that the width and height values are entered by the user and the canvas must be in div proportional in size
https://jsfiddle.net/1a11p3ng/2/
You can have a responsive canvas in 3 short and simple steps:
Remove the width and height attributes from your <canvas>.
<canvas id="responsive-canvas"></canvas>
Using CSS, set the width of your canvas to 100%.
#responsive-canvas {
width: 100%;
}
Using JavaScript, set the height to some ratio of the width.
var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;
To change width is not that hard. Just remove the width attribute from the tag and add width: 100%; in the css for #canvas
#canvas{
border: solid 1px blue;
width: 100%;
}
Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.
you need to remove the height attribute from the canvas tag and add this script:
<script>
function resize(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
}
$(document).ready(function(){
resize();
$(window).on("resize", function(){
resize();
});
});
</script>
You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/
EDIT:
To answer your second question. You need javascript
0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)
.border{
border: solid 1px black;
}
#canvas{
border: solid 1px blue;
width: 100%;
}
1) Changed your HTML to add ids where needed, two inputs and a button to set the values
<div class="row">
<div class="col-xs-2 col-sm-2 border">content left</div>
<div class="col-xs-6 col-sm-6 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas"></canvas>
</div>
<div class="col-xs-2 col-sm-2 border">content right</div>
</div>
2) Set the canvas height and width so that it fits inside the container
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
3) Set the values of the width and height forms
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
});
See a full example here https://jsfiddle.net/1a11p3ng/7/
UPDATE 2:
To have full control over the width you can use this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 border">content left</div>
<div class="col-xs-8 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas">
</canvas>
</div>
<div class="col-xs-2 border">content right</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#main-content").width($("#w-input").val());
$("#canvas").outerWidth($("#main-content").width());
});
});
</script>
https://jsfiddle.net/1a11p3ng/8/
the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.
The object-fit CSS property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.
Magically, object fit also works on a canvas element. No JavaScript needed, and the canvas doesn't stretch, automatically fills to proportion.
canvas {
width: 100%;
object-fit: contain;
}
<div class="outer">
<canvas id="canvas"></canvas>
</div>
.outer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#canvas {
position: absolute;
width: 100%;
height: 100%;
}
extending accepted answer with jquery
what if you want to add more canvas?, this jquery.each answer it
responsiveCanvas(); //first init
$(window).resize(function(){
responsiveCanvas(); //every resizing
stage.update(); //update the canvas, stage is object of easeljs
});
function responsiveCanvas(target){
$(canvas).each(function(e){
var parentWidth = $(this).parent().outerWidth();
var parentHeight = $(this).parent().outerHeight();
$(this).attr('width', parentWidth);
$(this).attr('height', parentHeight);
console.log(parentWidth);
})
}
it will do all the job for you
why we dont set the width or the height via css or style? because it will stretch your canvas instead of make it into expecting size
this seems to be working :
#canvas{
border: solid 1px blue;
width:100%;
}
One of the best possible way to do this without even using JavaScript is to just put that canvas inside a div tag and then display block (Note: width:100%; height:100%; is completely optional).
Run the snippet below to see how it works.....
.container {
display: block;
margin: auto;
height: auto;
}
#canvas {
width: 100%;
height: 100%;
border: 1px solid black;
}
<div class="container">
<!-- width and height are set just to show you it actually works-->
<canvas id="canvas" width=864 height=480></canvas>
</div>
There's a better way to do this in modern browsers using the vh and vw units.
vh is the viewport height.
So you can try something like this:
<style>
canvas {
border: solid 2px purple;
background-color: green;
width: 100%;
height: 80vh;
}
</style>
This will distort the aspect ration.
You can keep the aspect ratio by using the same unit for each. Here's an example with a 2:1 aspect ratio:
<style>
canvas {
width: 40vh;
height: 80vh;
}
</style>
try using max-width: 100%; on your canvas.
canvas {
max-width: 100%;
}
Hi I know this post has been going on for a while, but I had a very similar problem with my canvas. like mentioned as the viewport gets resized and so does the elements within the window. This can be done using css, however it doesnt quite apply to the elements within the canvas. Now if your canvas context is 2D this is the solution that works for me...
This can be used as a method.
class ParentObject{
constructor()
/**
* #this this._width - Private width variable that would store the size of the window width
*/
this._width = Number();
/**
* #this this._height - Private Height variable that would store the height of the window
*/
this._height= Number();
/**
* Calls the getCanvasDimensions method
*/
this.getCanvasDimensions();
//Getting the Width and Height as soon as the Window loads
window.addEventListener('load',()=>{
this.getCanvasDimensions()
})
//As the window is resized we are getting the new Canvas Dimensions
window.addEventListener('resize',()=>{
this.getCanvasDimensions();
getCanvasDimensions() {
// Width is determined by the css value for the viewport width this is then respected by the device pixel ratio. This is then used to set the canvas.width value
this._width = Math.round((Number(getComputedStyle(canvas).getPropertyValue('width').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
//Setting the canvas width
canvas.width = this._width
// height is determined by the css value for the viewport height this is then respected by the device pixel ratio. This is then used to set the canvas.height value
this._height = Math.round((Number(getComputedStyle(canvas).getPropertyValue('height').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
//Setting the canvas height
canvas.height = this._height
}
get width(){
//This sets the width to the private _width value
return this._width
}
get height(){
//This sets the height to the private _height value
return this._height
}
As a function on the global scope:
let width,height
function responsiveCanvas(){
let w = Math.round((Number(getComputedStyle(canvas).getPropertyValue('width').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
width = canvas.height = w;
let h = Math.round((Number(getComputedStyle(canvas).getPropertyValue('height').slice(0,-2))/devicePixelRatio) * devicePixelRatio);
height = canvas.height = h;
}
window.addEventListener('load',responsiveCanvas)
window.addEventListener('resize',responsiveCanvas)
Then just use the width and height variables to reference the sizes.
Anyways I hope that this helps someone out.
Try changing the width of the canvas to be equal to it's parent element.
<template>
<span class="Wrapper">
<canvas id="myChart" ></canvas>
</span>
</template>
<script>
const ctx = document.getElementById('myChart');
ctx.width = ctx.parentElement.offsetWidth;
ctx.height = ctx.parentElement.offsetHeight;
</script>
I am trying to integrate Google maps Places search box into my jQuery Mobile App.
I've created a search box with preferred styling in jQuery Mobile. I would like to use this search box instead of standard google search box. But for some reason my search box styling is being over ridden by Google maps search box styling as you can see in the below image (1). Can someone please suggest me a way to achieve the desired result shown in image2. Please also find my complete code. I'd be grateful for anyone's help.
The below image (2) shows what I am trying to achieve.
Complete code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
<!-- Google maps source for places seearch box and map display on page initilization-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<style>
#map-page, #map_canvas { width: 100%; height: 80%; padding: 0; }
.container_16, #set_location {
z-index:1;
}
.container_16 .alpha { clear-left: 0; }
.grid_3,.grid_13{ margin: 0; padding: 1.5% !important; border: 0; float: left; }
.container_16 { overflow: hidden; }
.container_16 .grid_3 {
width: 15.75% !important;
}
.container_16 .grid_13 {
width: 78.25% !important;
}
</style>
<script>
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = /** #type {HTMLInputElement} */(
document.getElementById('search_location')); // pac-input changed to search_location
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** #type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<div>
<img id='houseid' style='width:120px; ' src="" alt="logo"/>
</div>
<div>
Cancel
</div>
</div>
<div class='container_16 ui-corner-all' style='background-color: white; z-index:1000000000 !important; ' >
<div class='grid_3' style='padding-top:0% !important; padding-bottom:0% !important;'>
<a id='location' style='padding: 0%; margin-top: 0.65em;' href="#" onclick='get_location()' class="ui-btn ui-corner-all ui-mini">
<img id='location_img' style='width:20px; padding:5px;' src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSwWvXKHpBpZ04VsfcHHtdjyHWhOrNq1zjDPWKg4vrg35wiPD8S8DQBSg" alt="HouseID">
</a>
</div>
<div class='grid_13' style='padding-top:0% !important; padding-bottom:0% !important;'>
<input id='search_location' type='search' style=''>
</div>
</div>
<div role="main" class="ui-content" id="map_canvas" style='padding:0%;'>
<!-- map loads here... -->
</div>
</div>
<div data-role="popup" id="popup_cancel" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a"> <!-- This div element is not allowing Google map to render -->
<h1>Cancel ?</h1>
</div>
<div role="main" class="ui-content">
<h5 class="ui-title">Are you sure you want to cancel and go back?</h5>
Cancel
Delete
</div>
</div>
</body>
</html>
Remove line 51:
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
The purpose of this line is to embed the element "input" into the map at a specific location, "TOP_LEFT". See google documentation. I trialed your code with this commented out, and observed the result you were seeking.
How do I make an image hidden after clicking anywhere inside a div and make it stay hidden until page refresh?
<style>
#containter:active img {display: none}
</style>
<div id="containter">
<img src="image.png">
</div>
This works but as soon as you move the mouse outside of the div, the image reappears. I know it supposed to do that, but how to make it remain hidden?
A simple way of doing this is to wrap the item you want to hide on click in <label> and use a rule like
:checked + img {
display: none;
}
http://jsfiddle.net/kGDQq/1/
Here's an unobtrusive example for JS:
html:
<div id="tempDiv">click me</div>
js:
document.getElementById("tempDiv").onclick = function(e) {
e.target.style.visibility = 'hidden';
}
and a jsfiddle for it
In order to be semantically correct I suggest you use a JavaScript solution and don't try to do it with CSS/HTML hacks. The below method attaches a new click handler to all elements with the class .hide-on-click, simply add the class to any element you want to hide on click.
jsFiddle
HTML
<div class="hide-on-click">Test 1</div>
<div class="hide-on-click">Test 2</div>
<div class="hide-on-click">Test 3</div>
<div class="hide-on-click">Test 4</div>
JS
(function () {
var elements = document.getElementsByClassName('hide-on-click');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function () {
this.style.display = 'none';
});
}
})();
If you want the the space that the image took up not to collapse then you should use the visibility property.
this.style.visibility = 'hidden';
I am trying to change the page's background image depending on the image being hovered.
This is the layout of the page:
HTML:
<div id="main">
<img id="img1" src="1.jpg" />
<img id="img2" src="2.jpg" />
</div>
CSS:
#img1:hover #main
{
background: url('images/1.jpg'); /* not working */
}
#img2:hover #main
{
background: url('images/2.jpg'); /* not working */
}
'#main' is the ID I set for the tag.
Any ideas?
If you need change the background-image of #main div you should use CSS and jQuery:
http://jsfiddle.net/Soldier/cyAXv/1/
HTML
<body>
<div id="main">
<h1>Hi!</h1>
<img id="img1" src="img1"/>
<img id="img2" src="img2"/>
</div>
</body>
JS
$('#img1').hover(function() {
$('#main').css("background","url('background1')");
})
$('#img2').hover(function() {
$('#main').css("background","url('background2')");
})
You can't traverse backwards in CSS selectors. That is to say, you can't apply a style to an ancestor/parent based on the state of a child/descendant.
You will need to use JavaScript unfortunately. You can use classes and define the styles in CSS though to make it less lame. Something like this:
jsFiddle
HTML
<div id="main">
<div id="img1"></div>
<div id="img2"></div>
</div>
CSS
#main.img1 {
background: url('https://www.google.com.au/images/srpr/logo4w.png');
}
#main.img2 {
background: url('https://www.google.com.au/images/srpr/logo4w.png');
}
#img1,
#img2 {
width:100px;
height:100px;
background-color:#F00;
margin:10px;
}
JavaScript
var main = document.getElementById('main'),
img1 = document.getElementById('img1'),
img2 = document.getElementById('img2');
img1.onmouseover = function () {
main.className = 'img1';
};
img2.onmouseover = function () {
main.className = 'img2';
};
img1.onmouseout = function () {
main.className = '';
};
img2.onmouseout = function () {
main.className = '';
};
I have noticed in some site such as http://mashable.com that when you open page and try to scroll it , it appear to load images when you reach it .. i don't know if it's a just flicker effect or it's really done to make less load of images till scrolling to it ?
Here is a script to get you started. You'll need to do something with the image urls rather than just displaying them, but I'm sure you will figure this out...
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
div { border: solid 1px black; height:200px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
var pixelsBetweenImages = 200;
var imagesArray = {}
var imagesArray = new Array(); // regular array (add an optional integer argument to control array's size)
imagesArray[0] = "";
imagesArray[1] = "";
imagesArray[2] = "";
imagesArray[3] = "/images/ImageThree.gif";
imagesArray[4] = "/images/ImageFour.gif";
imagesArray[5] = "/images/ImageFive.gif";
imagesArray[6] = "/images/ImageSix.gif";
imagesArray[7] = "/images/ImageSeven.gif";
imagesArray[8] = "/images/ImageEight.gif";
$(window).scroll(function() {
var scrollpos = $(window).scrollTop() + $(window).height();
var imageIndex = Math.floor(scrollpos / pixelsBetweenImages);
if (imagesArray[imageIndex] != "") {
var div = $("#" + imageIndex);
div.html(imagesArray[imageIndex]);
imagesArray[imageIndex] = "";
}
});
</script>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div>Visible on first load</div>
<div id="3">3 </div>
<div id="4">4 </div>
<div id="5">5 </div>
<div id="6">6 </div>
<div id="7">7 </div>
<div id="8">8 </div>
</body>
</html>
The way this site does it is to apply an invisible style to all the images at page load and when scrolling it applies display: block with some effect.
you can attach your load/download image function to scroll event.
Some event sample here.