JavaScript Image Preload in function - javascript

first of all I don't really know anything about JavaScript.
I have a website slideshow with the following code:
//* Slideshow 1 *//
var slider_img_1 = document.querySelector(".image_slide_1");
var images_1 = ["fabric1_1.jpg", "fabric1_2.jpg", "fabric1_3.jpg", "fabric1_4.jpg", "fabric1_5.jpg"];
var i = 0;
//* Slideshow 2 *//
var slider_img_2 = document.querySelector(".image_slide_2");
var images_2 = ["book1_1.jpg", "book1_2.jpg", "book1_3.jpg", "book1_4.jpg", "book1_5.jpg", "book1_6.jpg", "book1_7.jpg"];
var j = 0;
When clicking on the slideshow the images cycle through.
Is it possible to let the images inside the var brackets preload, because currently they only start loading when clicking on the slideshow, which takes a lot of time in my case.
I hope you understand my question well. Thank you guys!

In this use case (if you need to load images with JavaScript) it would probably be best to append you images in to HTML when page is loaded and hide them, with CSS for example, when they shouldn't be visible.

Related

Reloading a DIV's image and class by Javascript on click of separate DIV.

The code I’m working with is too long to post, so I’ve made a fiddle here: http://jsfiddle.net/Emily92/5b72k225/
This code takes a random image and cuts it up into a number of pieces depending on the class that is applied in the div which contains the image.
When the page loads, a random image is selected from the array and the class is applied to it, what I’m trying to do is create a separate div, which when clicked on will reload the div containing the image. The result I’m looking for is for the image to be replaced by a new random image with the class applied to it.
Right now, the only way I can make a new image appear in the div is to reload the entire page, ideally this would be achieved by just having the div reload instead of all the other page elements reloading too.
I haven’t been able to do this so far but have received some help on here on how to reload an image and class on click of a div, lines 980-1018 of the Javascript code in the jsfiddle is the current attempt at achieving this, but solving this problem seems much more complicated as the image is being manipulated by the Javascript code, so perhaps this needs to also be reloaded at the same time as the new randomised image is selected?
This is the current attempt at solving this problem:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
I’ve written more details on the issue in the html section of the jsfiddle. I'd really appreciate any advice in solving this and thank you for any help in advance!
The plugin reads the images' src before page load, takes them and then generates the puzzle. As such, you can not just update the images as they're not there anymore. So you'd have to clear the divs under each difficulty classes (easyDiv,mediumDiv,hardDiv), append a new <img> under each div then calls / reload the plugin. Updated code in : http://jsfiddle.net/5b72k225/6/
Changes I've made:
Separate old reloadImages into initImages and reloadImages. initImages is called in the beginning, while reloadImages is called when reloading.
Created new function makePuzzle by taking out the intialization of the plugin from $(document).ready() block, so makePuzzle can be called after reloading new image.
The new $(document).ready() block now initializes the images and attaches click event handler to the button. When clicked, divs are emptied, new <img>s inserted and plugin is called.

Gallery HTML images show a thumbnail

First of all I want say sorry for my bad english and I will try my best to get help and help you help me out.
Well i have a project for my web designer class and my teacher wants me to do a gallery html page but I could not find any answer or anything close to what I am looking for.
Well i will explain how he wants...
Let's imagine a gallery page with 3 thumbnail photos.
Then the first thumbnail it's an airplane, the second it's a boat, the third it's a car.
Now if I click on the Airplane thumbnail it should only display slideshow of Airplanes and if I click on the Car Thumbnail it should only display Car images in the slideshow ... Did anybody understood what i meant? please if not i will explain it better.
Thank you so much, and again please sorry for my bad english and explanation.
This is what i currently have from now but when I click on the first image it opens the one I click and when I click next go to the next one on the side of it
Are you referring to a carousel? When you click on a thumbnail do you want a popover to appear and have carousel characteristics? To navigate from one picture to another.
If it's possible could you show your code in jsfiddle.net please?
Let's say the slideshow function looks a bit like this:
function slideShow() {
var slideShowImages = new Array();
slideShow.prototype.load = function(img){ /*loads img into array*/ };
slideShow.prototype.start = function(){ /*starts the slideshow*/ };
slideShow.prototype.stop = function() { /*stops slideshow*/ };
slideShow.prototype.empty = function() { /*empties array*/ };
};
To make sure you only show the images of a certain vehicle place them in an array:
var airplanes = new Array();
var cars = new Array();
var boats = new Array();
Then when loading all images, place them in the right array:
var boatImg = new Image();
boatImg.src = theSourceOfImage;
boatImg.addEventListener('load', function() { boats.push(boatImg) });
//etc etc.
Attach a click handler to the thumbnails.
SlideShow = new slideShow();
$("#boatThumbNailId").click(function() {
//now place all of the pictures from the boat array in the slideshow
for(var i = 0; i < boats.length; i++)
SlideShow.load(boats[i]);
//then just start the slideShow
SlideShow.start();
});
I hope this will be of some help to you, good luck.

HTML5 / JS - preProcess of uploaded html page and simulate pagebreaks

I'm making a html-5 based report generator. I created a button to upload a [HTML] page containing multiple paragraphs and tables, which is continuous.
Now my task is to display the whole contents into separated a4-sized pages, just like in Microsoft Word.]
This is the sketch: >>>LINK<<<
Here are part of my codes.
function xx (){
var fi = document.getElementById('fi').files[0];
reader.onload = function (e){
var reader = new FileReader();
var inner ="";
inner += this.result;
inn.innerHTML ="<center><div class='bg' id='0'><div id='testmain'>"+inner+"</div></div></center>";
}
reader.onerror = function (e){
dd.innerHTML = "error<br>";
}
reader.readAsText(fi);
}
After displaying the result of pages, users can click a specific part of the paper, just like a paragraph, then a pagebreak is created and the pages changes, the remaining content are pushed starting from top of next page.
Could you please give me some ideas about how to realize it?
Instead of using comments as chat to present my suggestion, here's my answer:
I once tried to do such a thing, back in html4. Here's the logic I was using. Create a div that has the exact size of your page CONTENT (after margins and all) put all your content in it and cycle through its direct children. If the current child's bottom is lower than his parent, take it and all the following children and put them in a new div CONTENT. Rinse and repeat.
For this, you will need to calculate the height of the container and cross-check it against the offset+height of the elements. My vanillaJS is a bit rusty as for browser specifics and all... So I will display the logic using jQuery but most of it can easily be made in pure JS. The code will assume that we have a div.page that has the right CSS to make it exactly the size of a content page, and that will not resize to content (overflow:hidden) and the document will contain one of those div with all the content of what should be in the pages...
$(document).ready(function(){
var $page = $('div.page');
var newPage = true;//To track if we loop
while(newPage){
newPage = false;
$page.children().each(function(){
if($(this).offset().top+$(this).outerHeight() > $page.offset().top+$page.height()){
$page = $('<div>').addClass('page').appendTo('body');
$(this).nextAll().appendTo($page);
$(this).prependTo($page);//Don't forget the element too.
newPage = true;
}
});
}
});

Changing background images, Jquery + CSS

I am working on a clients website and want the background images on the "cruise_offers" div to change, possibly only 3 - 4 images in rotation.
My jquery knowledge is quite basic so any help would be great.
I would prefer it to work with jQuery as I am using it elsewhere on the site.
My markup:
<div class="cruise_offers">
<span class="overlay_bar">
View our Great Cruise Offers
</span>
</div>
Cheers
Rory
Check out this link - I worked on something similar and it may help:
I found a jquery image rotatation script and adding hyperlinks to the images breaks the animation
$(div.cruise_offers).removeClass('cruise_offers');
$(div.cruise_offers).addClass('cruise_offers1');
create classes in your css with different background images.
Maybe something like this would work (I haven't tested it).
var current_image = 0;
var rotation_speed = 5000; //milliseconds
var where = $("div.cruise_offers");
var images = new Array();
images[0] = 'img1.jpg';
images[1] = 'img2.jpg';
function change_image() {
current_image++;
if (images[current_image].length == 0) {
current_image = 0;
}
$(where).css("background-image", "url("+images[current_image]+")")
}
if (where.length != 0) {
setTimeout("change_image()", rotation_speed);
}
Check out the Cycle plugin and visit the demos at the bottom of the page to get started.

Need to set 1 span's style to display:block on page load for an image gallery made up of span's set to display:none

i have some javascript in the head of a page that controls an image gallery where the user clicks a thumbnail image and a larger image and some text are revealed in a span. there are 10 of these thumbnails per page and i need to find out how to set the 1st thumbnail's hidden span to "block" on page load.
<script type="text/javascript">
function hideSpan(spanName) {
var obj = document.getElementById(spanName);
obj.style.border="0px";
obj.style.color="#fff";
obj.style.display="none";
obj.style.left="333px";
obj.style.padding="0";
obj.style.position="absolute";
obj.style.top="55px";
obj.style.width="244px";
}
function showSpan(spanName) {
var spanEl, count = 1;
while(spanEl = document.getElementById('link' + count++)){
spanEl.style.display = 'none';
}
var obj = document.getElementById(spanName);
obj.style.display="block";
}
</script>
any help with this is VERY appreciated thank you.
The simple, breezy way is to do this:
<body onload="showSpan('link1');">
The trouble here is that the onload event attached to body that way is executed a little late in the page loading (After all the parts-- including images-- are loaded) so it'll be murder for your dial up users. jQuery implements a much better way:
$(document).ready(function () {
showSpan('link1');
});
If you're not using jQuery, then someone here much wiser than I more than likely knows the correct way to do it using "proper" JavaScript, I don't remember the event name that jQuery uses off the top of my head.

Categories

Resources