Develop Reference

Lazy loading breaks lightbox

Using this lazy-loading code, my lightbox breaks: clicking on an image shows the lightbox but without image.
I can see that the lightbox img tag has no src value by checking the inspector. I guess the lightbox checks the src before the lazy-loading has assigned the attribute and the value to the image.
How can I fix this issue?

You may be able to use the data-fullsize parameter mentioned in the documentation - if this is set on each <img> tag, they should be loaded when the gallery is opened.
An example of how this might look in the HTML (with the lazy-loading example from the link you provided):
<img data-lazy="img/cow.jpeg" data-fullsize="img/cow.jpeg">

Animated GIFs not playing in Firefox when loaded via AngularJS

I'm a beginner with Angular 1. I have a function in my controller that generates URLs to various animated GIF files depending on some parameters in an HTML form. I then have an img tag that is supposed to show that GIF file, like this:
<img alt="preview" src="{{ctrl.previewURL()}}"/>
Basically, it works. When I change the values in my input fields, the image gets updated accordingly. However, after the third image loaded this way, the GIFs stop playing their animations (though the correct files are still being loaded), only showing one frame. This happens no matter what order I try to load them in, so it's not a problem with the files themselves.
Interestingly, this problem only seems to appear in Firefox (I'm using version 48). It all works flawlessly in Microsoft Edge. I didn't have the chance to try other browsers yet.
Is there a way to get this to work in Firefox as well? Or is there a better practice for doing something like this with Angular?

Instead of src use ng-src
The browser see the src as "{{ctrl.previewURL()}}" at first, until angular start work so use ng-src and the image will be loaded with angular only.
your code:
<img alt="preview" ng-src="{{ctrl.previewURL()}}"/>

Site with many images, load only some images?

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.

Changing an <img>'s src attribute and dispaying the new image _as it loads_

I'm displaying images like this:
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />
/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.
The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."
It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.
A way to show a progress bar would be even better.
Does anybody have suggestoins?

You can use preloader, but still should wait for image to load completely.
Other solution relies on how you saved the images.
You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).
In Photoshop:
Open the image
Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
On the upper right part of the opened dialog, choose the 'JPEG' format
You will see some options, choose 'Progressive'
Save
This option will make the file slightly bigger in size, but the browser will show the images as they load.

Rather you can add image attribute 'title' or 'alt' value as 'Loading .... '
as title or alt property get displayed to user if image is about to load.
after image get loaded using Javascript you can change the alt or title value.
this is a basic solution. you can use it until you find proper solution.

Your question is very similar to my question where I discovered a solution which worked for me. It is unclear if it will work for you though because commenters have suggested it is dependent on the image being saved with the progressive option enabled.
For my case, the initial image always showed as it loaded and so my solution seemed to utilize that. For your case, if you were to initially load your big file first as a testcase and it appeared as it was downloaded, then I suspect my solution would also work for you.

prettyphoto - jquery gallery plugin - image can not be loaded

I have very weird behaviour on my site
www.zrubex.eu
I've implemented PrettyPhoto gallery and on local server (wamp) everything works fine, but when I upload it to web server, only two of 42 images displays in full size after clicking on the thumbnail. It's 5th and 8th.
I researched it with firebug and it's trying to get three images after click on one image - the clicked one, previous and next. But the problem is, that it cannot find the image and displays warning that the path was not found. I don't know why those 2 images work and others don't.

The extension is capitalized thus making it not find the image.
I was watching your requests and its trying to request http://www.zrubex.eu/images/DSC00895.JPG... which of course doesn't exist.
But http://www.zrubex.eu/images/DSC00895.jpg does exist.
You have:
<img src="images/DSC00895t.jpg" width="96" height="96" alt="">
Fix the extension for the larger image and it will work.
<img src="images/DSC00895t.jpg" width="96" height="96" alt="">