How to preload an image using jQuery - javascript

Hi I have a project in which one of the pages has a gallery. Something like that:
<div id="gallery" class="sections">
<img src="Images/Image1.jpg" class="thumbnails">
<img src="Images/Image2.jpg" class="thumbnails">
<img src="Images/Image3.jpg" class="thumbnails">
etc...
</div>
I would like to preload these images so that when you access the gallery page they are already loaded. I know you can do this by using javascript. Something along the lines of:
var myImage = new Image();
myImage1.src = "Images/Image1.jpg";
etc...
What I am unsure about is the next step. Do I remove the src from the html and add an id, like so:
<div id="gallery" class="sections">
<img id="image1" class="thumbnails">
<img id="image2" class="thumbnails">
<img id="image3" class="thumbnails">
etc...
</div>
and then do something like that:
$('#image1').append(myImage1);
This hasn't worked... I have also tried:
$('#image1').attr('src','Images/Image1.jpg');
And that hasn't worked either.
I have had a look around and there are plenty of tutorials about how to make a function that preloads your images etc... but I am not quite there yet. I just would like to know how to do it on a one by one basis for now and then maybe create a function. Thanks.

They are many function to do that
Images are loaded in the DOM when the page is open, but not visibles. Then, when you want show them (On click, on a slider, ...), no load time !
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Use your function with all your image path
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);

Related

Load clicked image only

I have a CSS lightbox gallery on my website, however it loaded the thumbnails and the large images at the same time.
Below are the contents of my various files;
HTML:
<div class=galerie>
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
</div>
CSS:
.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}
I've added a script (jQuery):
<script>
$("a.galimg").click(function() {
$(".lightbox").each(function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
});
</script>
And now the large files are loaded only after I click a thumbnail.
The problem is that they all load at once, and I want only the clicked one to load at a time.
Is there a way to do this?
I know the each function does that, is there any other function I could use?
I'm not sure why you want to do something like this (would be easier if you post a link to your site) but i'll try to help.
Just don't use 'each' function. So your code should look something like this:
$("a.galimg").click(function() {
var imgID = $(this).attr('href');
$(imgID).attr("src", $(this).data('srcbig'));
});
And for HTML:
<div class=galerie>
<img src=/images/thumbnail.jpg /><img src="" alt="remember about me">
</div>
You could even delete the second 'a href' and image and just create it dynamically. It all depends on how your lightbox library works and what you need.
Attr sets an attribute, if you're trying to use it, I would go with something like this. I'm not sure what you're trying to set the attribute to, but this is the syntax:
<script>
$("a.galimg").click(function() {
$(this).attr("data-src", "your desired data attribute");
})
});
</script>
http://www.w3schools.com/jquery/html_attr.asp

Simple img carousel function not working?

So I'm creating a simple image carousel for a mock webpage I'm building.
I'm currently following this tutorial on YouTube. Minute: 7:10 shows the function I'm asking about.
In this tutorial he creates this jquery function to activate the carousel.
$(document).ready(function(){
$(".nextLink").on("click", function(){
var currentActiveImage = $(".image-shown");
var nextActiveImage = currentActiveImage.next();
currentActiveImage.removeClass(".image-shown").addClass(".image-hidden");
nextActiveImage.addClass(".image-shown").removeClass("image-hidden");
});
});
Here's the HTML
<div class="carousel-outer">
<figure class="carousel-inner">
<img class="image-shown" src="images/team/alex_morrales.jpg" alt="">
<img class="image-hidden" src="images/team/david_kim.jpg" alt="">
<img class="image-hidden" src="images/team/jenny_tabers.jpg" alt="">
<img class="image-hidden" src="images/team/joey_barrett.jpg" alt="">
<img class="image-hidden" src="images/team/melinda_lee.jpg" alt="">
<img class="image-hidden" src="images/team/rachel_dotson.jpg" alt="">
</figure>
<div class="img-buttons-box">
<div class="img-buttons">
<a class="previousLink" href="#">Previous</a>
<a class="nextLink" href="#">Next</a>
</div>
</div>
</div>
Here's the CSS
.image-shown {
display: inline-block;
}
.image-hidden {
display: none;
}
I'm under the impression that the above function in itself is enough to have the carousel work well and cycle through the photos seamlessly.
Always displaying the next one in the lineup and hiding the rest.
However, this is obviously not the case as this is what it looks like before and after I hit the "next" button for the first time (it doesn't do anything on subsequent presses).
Before
After
Help understanding why the function, as is, isn't seemingly enough to make the carousel work is greatly appreciated, thank you.
When you reference a class in .removeClass() or .addClass() you dont have to write the dot before the class.
$(document).ready(function(){
$(".nextLink").on("click", function(){
var currentActiveImage = $(".image-shown");
var nextActiveImage = currentActiveImage.next();
currentActiveImage.removeClass("image-shown").addClass("image-hidden");
nextActiveImage.addClass("image-shown").removeClass("image-hidden");
});
});
PS: I saw this by using the devtools; clicked on "Next" and saw how an img got classes with the dot. Just an advice if you want to debug DOM changes quickly.

javascript photo gallery using image onclicks and div containers

I am trying to create a simple javascript photo gallery. First I used thumbnails of the images I wanted to use in the HTML. The HTML looks like this
<div id="imgs">
<img onClick="gallery()" src="images/photo25thumbnail.jpg">
<img onClick="gallery()" src="images/photo43thumbnail.jpg">
<img onClick="gallery()" src="images/photo46thumbnail.jpg">
<img onClick="gallery()" src="images/photo47thumbnail.jpg">
<img onClick="gallery()" src="images/photo61thumbnail.jpg">
</div>
<div id="display">
<div>
</body>
</html>
So when the user clicks on the image it is supossed to trigger the function gallery. Here is my javascript code
function gallery()
{
var img1 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo25.jpg'></a>";
var img2 = document.getElementById("display")
.innerHTML ="<a href='#'><img src='images/photo43.jpg'></a>";
var img3 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo46.jpg'></a>";
var img4 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo47.jpg'></a>";
var img5 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo61.jpg'></a>";
}
But for some reason when the I click on one of the images it only shows the last image in the div container. I am obviously doing something wrong but I feel like I am kind of on the right track. Help please.
Whats the last thing that happens in you function?
You need to pass the image you want a parameter e.g.
gallery(1);
And the then get you function to show image 1:
function gallery(img_num){
//show image number img_num
}
There's many other things I could say about your code about inline javascript etc. but you can google that there are many sites that can explain that.
Put yourself on your program's place: you take the element with id "display" and put into it first photo, then 2nd and so on till the 5th.
Doesn't matter which photo was clicked. You do always the same and take 5th photo in the result.
i think this may help you
Live Demo Click Here
HTML
<div id="imgs">
<img id="imgs1" alt="adf" src="http://i2.wp.com/img.timeinc.net/time/daily/2013/1311 /232_int_afghanistan_1109.jpg?resize=200%2C133">
<img id="imgs2" src="http://i0.wp.com/img.timeinc.net/time/daily/2013/1311/232_ent_thor_1110.jpg?resize=200%2C133">
</div>
<div id="display">
<div>
JQuery
$(document).ready(function () {
$("#imgs1").click(function() {
$("#display").html("<a href='#'><img src='http://timeglobalspin.files.wordpress.com/2013/11/de7f94520e744ada949e8f0759daf783-0.jpg?w=1393'></a>");
});
$("#imgs2").click(function() {
$("#display").html("<a href='#'><img src='http://cinepop.com.br/wp-content/uploads/2013/10/Thor-O-Mundo-Sombrio-4-650x400.jpg'></a>");
});
});
For Live Demo Click Here
If this is what you need put a Reply me..

how to prevent fancybox from deleting the clicked thumbnail

Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.
I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);
Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.
I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>

Can you control the order in which images (hidden vs visible) on a web page are loaded?

If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>
The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.
As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/
Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.
If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Categories