I am using carousel slider in my website using bootstrap.
Problem:
When i open my webpage the slider in header section loads first but first image take time to load on the slider. I want to solve my problem.
What i want :
I want that if slider loads then images must be load at the same time otherwise if images taking time to load then slider should be load when images are ready to load on the webpage.
Kindly suggest me what i should do.
If you slider contains more than 10 images and if images are of big size, then follow these steps,
Apply src to only first 3 images of slider. For rest images, apply image url to new attribute 'delayedsrc'. delayedsrc attribute contains your image url. Also apply class 'defered_loading' to these images.
then add this js code,
$('.defered_loading').each(function() {
$(this).attr('src', $(this).attr('delayedsrc'));
}).promise().done(function() {
// intialize your slider here
});
Related
I am using the simple jssor slideshow with thumbnails.
In my page I am getting image captions and urls in a javascript array on page load. To use in jssor I gave the images and thumbnails an id and added src to each of them in javascript as follows:
document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
On doing this the slides do load correctly in the correct areas but the green loading sign of slideshow remains active and the slides appear to be in the background. However when I give the urls directly in the img tags and not through javascript file it loads correctly without showing the green loading image.
Please provide a solution to this issue.
Furthermore If my slides are less than ten how to remove the extra thumbnail images borders from appearing and how to add more image and thumbnail elements dynamically in jssor using javascript if number of images exceeds that number.
Secondly how to similarly add captions in the jssor slideshow using javascript. Also I need javascript and css code for jssor to display image full size in an overlay on click.
Since I am not using the jQuery version but javascript I would like the solutions in javascript.
Re: loading issue.
Please assign image src before initialization of jssor slider. See
document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
var jssor_slider1 = new $JssorSlider$(...;
Re: dynamically remove/add slide
Please add new slide element to 'slides' container or remove unused slide from 'slides' container.
Re: add captions to slide
document.getElementById("slide0").appendChild(...
Re: display image full size in overlay
function DisplayFullSizeImage(slideIndex) {
//do something to display full size image
}
jssor_slider1.$On($JssorSlider$.$EVT_CLICK, DisplayFullSizeImage);
Btw, there is a better way to populate html code for your slider dynamically.
Reference:
Jssor - how to add slides dynamically?
Jssor for jssor slider user is it possible to make a jssor slider with dynamic images
I am using the Elastic Image Slideshow script, and would like to add data-caption text for each image, then display the text of the currently shown image into a div, outside of the slideshow (basically in a different section of the page.)
I found this script, to work with jQuery cycle, and tried to modify it to work but I am not having much luck.
Ok, I found this fiddle: http://jsfiddle.net/Snfst/6/ and modified it down to this:
$('img').hover(function(){
$('#caption').html($(this).data('caption'))
});
Question now is how do I get it to load without having to hover over the image, and only show the data for the currently shown image?
The page that I'm trying to make this work on might better show what I'm trying to do:
http://diguiseppi.com/Brad/Andy/portfolio-web-design.html
I am playing with a new website I created a few days ago.
The site contains lots and lots of gifs there is displayed on the frontpage. As of right now, a static .png thumbnail is showed and when hovered, it displays the gif instead.
This is pretty much what I want. However, as of now, the site preloads every single gif on the page, which takes a long time and a lot traffic is wasted. If there are 50 gifs on the frontpage and every gif is 2mb, that's 100mb traffic per user.
Isn't it possible to only load every png, then load the gif if it's hovered? I know it won't play smooth the first time, but I don't have a whole lot of web traffic on my web hotel.
Is this possible with either some PHP or good-old JavaScript?
Thanks
Change the URL of the image with hover. In this case with jQuery
$('#my_image').hover(function(){
$('#my_image').attr('src','my.gif');
});
Want to make it dynamic without having to set it per image? Add the HTML5 Data element:
<img src="my.png" data-gif="my.gif" />
And with JavaScript:
$('img').hover(function(){
$(this).attr('src',$(this).data('gif'));
});
You can add the HTML that contains the GIFs to the DOM after page load, inserting it as a string or using AJAX.
Another viable solution is to use CSS sprites and eliminate all those images by combining them into a larger one.
You're thinking about it the wrong way. Browsers don't request images unless you include the images in your page. You shouldn't try to prevent included images from being loaded, you should simply not include the images in the first place.
Remove the image URL from your code. In whatever code you have that currently makes the hidden image visible, you can set the URL as well.
Are the file names the same except for the extension? If so I would recommend this approach
Stop a gif animation onload, on mouseover start the activation
What you would do different is replace the .png with .gif this will load the gif on hover instead of at page load. Right now it sounds like you are loading both the .png and the .gif in a hidden div.
Edit:
Then on mouseout you would switch the source back to the .png.
I just recently noticed that when you click an image on Yahoo! Image Search it first shows a low resolution image which then gradually turns into a high resolution image.
Example:
Yahoo! Image Search
When you click the link above and click through all the images you notice that they're always showing a low resolution image first. Why are they doing it? Does the website appear to be loading faster to the user if they're doing it this way?
Also, could someone please point me into the direction on how this is actually done (preferably by using JQuery, in the case that they're using JavaScript to do it)?
They're using a cache of thumbnails from this URL
http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH
where HASH and NUM are (somehow) references to a particular thumbnail.
For example, NUM = 1148286928700 and HASH = d2f4bbf91a853cefbc18794b6eb9ecdd are a reference to this thumbnail.
Of course, thumbnails are smaller in file size than bigger images, so Yahoo! loads from a cache of thumbnails first to give the user a glimpse of what the image is, and loads the full size image in the background.
I suspect the technique they use is load the image in to a hidden img tag, and then bind to the load event of that image tag to a function which replaces the thumbnail src with the full size image src. Hence, when the (hidden) full size image is loaded, it replaces the thumbnail image we see on page load.
Let's assume the thumbnail image is loaded in to an img tag with an ID of main_image, and our full size image is loading (in the background) in a hidden img tag with an ID of secondary_image. Then we bind to the load event of #secondary_image, and replace the src of #main_image on load:
$('#secondary_image').load(function() {
// on big image load, replace the src of the thumbnail image
$('#main_image').attr('src', $(this).attr('src'));
}
Then when the user wishes to view another image, we replace the src of #main_image with a different cached thumbnail, replace the src of #secondary_image with the large image, and bind the load event again (so ideally you'd create a function with the above code, and call this function whenever you changed the #secondary_image src.
All they are doing is showing a thumbnail first, then waiting a bit (to save bandwidth for you and real site) then loading the real image. To do that, they are probably just changing the src attribute on the image, or adding another image on top.
Interesting to note that the thumbs are provided by Bing.
I have so many images in a slide show and I need serve this slide show on mobile Safari. I noticed that whenever the page loads it gets stuck for some time until all images get loaded.
I decided to load images with a click event when ever I need them for specific action instead of appending all images directly into the HTML.
I want to use image pre-loading script and then I will add the image depending on the user action.
Will image pre-loading effect the page load time, or will this help me to improve the page load time and adding images as needed?
Also do let me know if there is any other way to achieve it. My goal is to load the page faster and also want to add images as needed which will not effect the animation quality and image rendering.
Image loading script
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
Use CSS:
a:hover {
background:url("menu2.gif") left top no-repeat;
}