Site with many images, load only some images? - javascript

I have a site that show many images hosted in a server. In the page, the images are situated in of max 100 images. In a single moment, only one div is displayed (throw the css style "display") and the others have the display:none.
I need a way that allow me to load only the images of the div displayed because when I open the site, it loads all the images.

when You are using display:none - the images are still being downloaded. But if You'll use display:none on background-image they won't. Another approach is to make a button "Load more..." and asynchronously request the rest of the images

your can hide the images which you dont want to display on page load, try following code in document.ready function
$(document).ready(function(){
$("#img1").hide();
$("#img2").hide();
$("#img3").hide();
.
.
.
$("#img_n").hide();
});

One way you could do it is by making a large image sprite, which you will upload and let the browser cache it.
A good explanation about CSS sprites can be found here: http://www.w3schools.com/css/css_image_sprites.asp

Just leave the img tag's src="" blank on all but the first image and modify it with javascript.
You can use an onload event to trigger setting the next src property.

Related

Loading Images on demand without altering the src attribute

I have a website that 40 babynames are shown in each page, each name have some photos that are uploaded by users. I use iframes to show the images of each name when the user clicks on "show photos button" (iframe is created dynamically after click). Well in this case images are never indexed with search engines.
If I load them right after each name (and not in a iframe) then the page size will be very large and will load very slow.
I'm looking for a way that load images on demand (just as it is now) without using iframes. setting the src on demand will be in-vane as search engines won't have access to them and setting them will make page very heavy as I said before.
Any suggestions on how to do this?
You could use a php script that displays one singe thumbnail (1x1 pixels) when the query string ends on "small"; with ajax you can now access every single image and remove the ending "small" so that the php script uses the original file.
http://php.net/manual/en/function.imagejpeg.php might help ^^
So you access "image.php?myimage.jpg-small" and the script loads the fixed thumbnail that will get cached after the first load. Then, you change the img src property using ajax to "image.php?myimage.jpg" and we're done...
You could use a .htaccess - rewrite for better look of the image source...
You can't really get Google to index the images if they're not there to start with - could you use thumbnails instead for each image avoiding slow loading speeds and allowing Google to index them? Then on click you could replace the src tag with the full size image.
There's libraries like Timthumb that can generate and cache thumbnails for you if you don't want to write all the resizing code.

How can I replace an image with an SWF on click, and revert back to the image when another image is clicked and replaced with an SWF?

Let's say I have 3 images, each a placeholder for a Flash animation. When I click an image I want it to be replaced by its corresponding SWF. When I click another image I want the current SWF to be replaced by its placeholder image, and the newly clicked image to be replaced by its SWF.
I'm thinking of using the data attribute on the images to hold the path to the SWF…but this doesn't seem like the cleanest way to accomplish what I want.
IMAGE and SWF are quite different object. The first is a simple block element, the second is a more complex object/embed.
The simpliest way i see to achieve what you want is to load both image and swf, maybe in 2 different DIVs, and then swap them trough javascript, setting the "display" style as you wish.
Another way is create a DIV for each image and, always through javascript, dinamically rewrite the content on "click" event. Cleaner, but a bit more complex.
You can replace the html code using .replaceWith().
BUT each time you will replace html to Flash, your animation will be restarted.
It means :
Replace html->swf : Flash Player loads SWF
Replace swf->html : Flash Player unloads SWF
I'm not talking about the SWF downloading (you can use cache for this) but only the SWF application loading.
Depending on your needs, this solution can fit but IMO you should think about not using Flash.
By the way, working with display: none; or .hidden (e.g.) will have the same effect as replacing html code.

show and hide Javascript (display:none) issue

I have created a show/hide javascript function which seems to work perfectly - When you click on the link it reveals the gif version of the logo.
The issue i'm having is when you first go onto the landing page click here you can see both images, it's only when you click on the still image the function works the way is should - only displaying one image at a time. Does anyone know how i can resolve this problem?
You'll have to give the image a display:none style as well to start with:
<img id="center-img-gif" alt="main-img" src="css/images/logo.gif" style="display:none;">
use CSS property Display:none; for one of the images.
You can set display:none of one image at design time
OR
You can set display:none of one image on body onload

How to load a large image before anything in the browser is rendered

The website I'm making has a large image fading in from black when the website loads. It's a good quality image and the effect turns out nice.
The problem is that when a person visits the website a first time, the fade doesn't occur and the image just appears. I figure that the opacity is changed right away, but the image itself hasn't been downloaded. Once it's cached, revisiting the site shows the effect.
What are some ways to ensure that the image is fully downloaded before the fade in begins (the fade is simple jQuery: $('#bg').fadeIn(1000);)?
EDIT - Thank you everyone. It's been solved. I left something out that I didn't realize was important. It wasn't an img tag, but a div with an image background. When I changed it to an img, the $(document).ready() function loaded the image before the fade. Thank you!
$(function() { $('#bg').fadeIn(1000)) })
Just take a look at .load() event handler in jQuery. It is called when everything in the associated element has been loaded - if you attach it to img tag with your image, the callback will be called when the image was fully loaded.
You should put the Script of loading the IMG at the top of the HTML ( HEAD is in option)
BUT
its a bad practice.
you can maeke a basic page and at the button scripts - you can download the img - and by the load event - you can FADE it IN.
i think it's easier to use the ready function
http://api.jquery.com/ready/

Wait for a particular image to load completely using jquery?

I am currently using the code below to load images but I want to show some kind of loading gif before the image loads completely.
$('#addimage').attr('src', src[i]);
$('#addimage').show();
Since I am using this in a animated mediabox the image loading in blocks does not look good so by the time the image is loading I want to replace it by showing a loading gif. Thanks
Use the load() event:
$("#addimage").load(function() {
$(this).show();
});
Edit: to show one image until another loads is a little more convoluted but entirely possible. See Image Loading.
You can use the callback event for once the image has loaded. Something like:
$('#addimage').load(function() { $(this).show() });
$('#addimage').attr('src', src[i]);
So you setup the load handler first, then apply your src attribute. This is assuming the image is hidden by default (via CSS, etc).
You can bind the onload event to the image.
Why not just set the src attribute to point to a loading image (EG, animated gif) and just show it the whole time?

Categories

Resources