I have range slider which flicks through images and gives a number.
When I refresh the page the image shows up blank.
How do I set a default image so that when I refresh the page the image shows on load.
link to codepen https://codepen.io/jameswill77/pen/mdxBaQN
var imageUrl = new Array();
imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[500] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[1000] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[1500] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[2000] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[2500] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[3000] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
$(document).on('input change', '#slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html( $(this).val() );
$("#img").prop("src", imageUrl[v]);
});
CodePudding user response:
The image element is not given an image URL until the slider is moved. To set a default image, you could provide the image element an image source with the src attribute in the HTML.
<img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" style='width:600px;height:600px;' id='img'/>
Alternatively, you could set the default image in Javascript by adding $("#img").prop("src", imageUrl[0]);
right above the slider event class.