I have many images inside of a scrolling DIV for an image gallery and the images are only loading when they become visible in the DIV after you scroll down. This is causing the DIV to freeze trying to load the images. Is there any way that I can fix this? I'm sure it would probably be javascript related.
Just my simple DIV.
<div style="width:275;height:400;overflow-x:scroll;">
content
</div>
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
You can pre-load the images with javascript
You need to preload the images.
Try this way if you don't want to use Javascript.
Yes, and in fact there are many related libs for this purpose. mostly for bandwidth saving purpose for old browsers, but will do the same work as you wanted here.
http://yuilibrary.com/yui/docs/imageloader/
http://www.appelsiini.net/projects/lazyload
at the same time, if your image are very big in size and you have a very long line of them, remember to hide (display: none) them after they become invisible from view.
Try using this lazy load script which will load the images before fixed number of pixels before they reach the visible area. This has many options
http://www.appelsiini.net/projects/lazyload
function expandDiv(idOfDivElement) {
divObj = document.getElementById(idOfDivElement);
var imageObj = document.createElement('img');
imageObj.setAttribute('src', 'path/example_image.jpg');
divObj.appendChild(imageObj);
// your expand div code here
}
Related
How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.
The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).
On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?
You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:
Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}
One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/
http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.
Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link
After playing with hidden divs (display:none), I've noticed that the browser does not seem to bother downloading any images/flash files that are in that div, until the divs are changed to visible.
The problem with that is, on most users machines, when viewing a hidden div, there seems to be a good couple of seconds in waiting time for the browser to download images or swf files, etc... which == no happy user.
Is there any way to make the browser download the hidden div's content, while it's hidden, and not when it's been set to visible?
In JS or jQuery maybe?
Thanks
Don't use display:none; to hide images.
Try setting the following to hide the content.
height:0;
width:0;
overflow:hidden;
You could also try positioning the content off the screen with absolute positioning.
position:absolute;
left:-1000px;
Here are some options:
Start with the DIV visible, then add the hidden style using jQuery after page load, or after the browser has already fetched the images. This will likely happen so quickly no one will even notice the change.
Position the DIV off screen initially while things load, and fix the dimensions of the DIV (height/width) to be very small so that it doesn't take up visible space.
Use jQuery to load the content of the DIV at the same moment you want to make it visible--fetch the images on demand. i.e. $('#yourDivId').html('[html goes here]');
Use visible:hidden instead of display:none (but beware that it will still occupy space, so this may not work in all situations). You might place a copy of the image at the bottom of the page where layout won't be affected, but will still be fetched and browser-cached for when you make your other location visible.
One way which you can try is, instead of hiding them position absolutely with large negative left position and with minimum dimension may be 1 or 0.
I am mixing some javascript zoom (not much experience). I use
div image1 fit to screen/div
div (show together)
div image1 zoomable div
div image1 small zoom navigator div
div
when I click the one the other div hides and vice vera.
I don't know if the image is loaded three times, it loads immediately cause it runs locally on my pc. If the image is really loaded three times is there anything I can do to avoid it?
Thank you all,
in advance!
You can use the web-developer tools built into Chrome or IE (and available as a plugin to Firefox) to determine whether the image is loading three times. But unless something strange is going on, it will only load once.
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.