Overview
So basically I have a carousel that I am populating with images using URLs from a JSON file. I loop through this JSON file and set each URL into a data-src attribute of an image and set it to lazy load in the Owl Carousel. However, I do not know what the URLs provided to me will be, nor do I know if they are broken or not. These are fairly high resolution images, so I would ideally not load them more than once and not load them all in at once.
Problem
However, an issue arises when I occasionally encounter a broken image link when I make a request for the links. I don't load the images prior to setting it in the carousel, so I don't really have a way to check to see if it's valid or not. I am trying to find a way to remove the broken images prior to the lazy load of the image without causing a very long load time or any abnormal movements in the carousel.
What I've tried
Loading the images in prior to loading the element. This causes a significant increase in load time which I would like to avoid if unnecessary.
Using .onerror to remove the images when they are loaded in, but broken. This was fast, but causes weird errors in the movement of the carousel. Also, if I want it to be completely reliable, I have to jump back to the prior slide, and jump forward again. For example:
$('img.owl-lazy').on("error", function () {
var carouselData = carousel.data('owl.carousel');
var index = $(this).parent().index();
carousel.trigger('remove.owl.carousel', carouselData.relative(index))
.trigger('refresh.owl.carousel')
.trigger('prev.owl.carousel')
.trigger('next.owl.carousel');
});
This ends up creating weird animation effects where it looks like its moving backwards to get to the next slide.
Loading in each image and adding them to the carousel as they arrive. This did seem to load the images faster, but ended up creating a stacking effect in the images until they were all loaded, in which they were then placed into the carousel correctly.
Just removing the element associated with that slide using .remove(). This ended up causing weird navigation issues with the carousel.
If anyone has any strategies that they would recommend I would very much appreciate the advice. Also, if you need more code I would be happy to include it.
Edit 1: Example
Here is a Codepen giving an example of the issue I'm coming across. (I replaced my standard ajax call with a bunch of duck pictures, so in a standard scenario I would not know the URLs being provided in advance.) Also, note that the carousel loads in 3 or 4 of the images towards the beginning of the carousel to provide a bit of a buffer. There may be images with broken links included in this initial buffer as well as towards the end.
Related
I am new to lightSlider, and not good at JS, it's been years since I've used it, and it's starting to come back to me slowly. Now I remember why I wanted to work on the back-end and not the UI.
So, I am using lightSlider, and we have the basics, and in the HTML code we have this:
Now, in the javascript code we have a loop which gets images like this:
$.each(that.selectedSeries.instance, function (index, instance) {
var url = get url for this image
$("#instances").append($('<li data-thumb="' + url >
<img src="' + theUrl + '" alt="Lights" class="thumbnailimage"/></li>'));
So, we may be loading dozens, maybe even hundreds of images and adding them one at a time to the DOM. The 'li' tags get added as the example shows, but what happens is that the thumbnail images load and load, and it wraps around the screen taking up all available screen space. Then it stops. If I resize the screen, then the slider re-adjusts, and I get the scolling thumbnails.
I tried to refresh the slider after all the images have been loaded, but that did not help. I tried to hide and show the slider after the images have been loaded, but that didn't help either.
The original developer had a basic slider that worked perfectly, and the only reason we chose to go with a new slider is because we wanted images lazy-loaded. I tried looking for a bunch of sliders that would have this coded already. We don't have time to code a solution ourselves, so if we could find a good slider that would be great. if we could make lightSlider work better, we would ....
Thanks!
I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL
I am using this tutorial http://css-tricks.com/seamless-responsive-photo-grid/ to create a grid with lazyload as you can see here in action http://jsfiddle.net/gaz2A/
The problem is that the images are loaded like
1|3|5|7
2|4|6|8
instead of
1|2|3|4
5|6|7|8
and leaves the start screen blank at the most part.
How can I change this ?
*I tried masonry plugin with infinite scroll, however I do not want to rely on static pages, so masonry is not a choice for me.
Images will load in the order they are presented in the DOM.
Either change the DOM representation so that the images are appended into DOM in the correct order (eg. side by side first), or use some JS based preloading to preload the images in the order you want.
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 have an image on a webpage and when the user hovers over it, another image appears. When then hovering over the appearing image, it flickers.
Anybody any idea why that is?
Tony
UPDATE: The first image does not dissapear when hovering, just another (smaller) image appears over the top in the left top corner. When now moving over that smaller image, then the flicker appears.
The image on the site is part of a gallery, so it's a php variable and gets loaded when a user selects from a list of images. So embedding one into the other is very hard.
Because the browser is fetching the new image. The best solution is to incorporate both images into one, and either purely use CSS to change the background-position on :hover, or ( for IE6 and non-anchor elements ) change the background position with JS.
In IE? IE is notorious for not caching images that are loaded dynamically (either with CSS :hover or due to Javascript events). You can use CSS sprites (basically, using one image file to display both images, and using positioning to show one or the other; tutorial, linked by Mike Robinson), or you can use image preloading:
var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';
Edit: and other browsers will do the same on first load. IE just may continue to do it on every switch.
If I understand you right, you probably replace the src of your image every time the mouseover event is fired. So, even when your image is replaced, your event is fired and the image is replaced with itself, which may cause flickering.
I guess you're probably using IE. This is a bug with the way it implements caching in some versions. You fix it by either configuring your web server to send proper cache headers, or by using CSS sprites. I recommend the latter, as that means less HTTP requests, and the preloading works even without JS.