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()}}"/>
Related
I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.
Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max
I'm using the image picker to show images on the server.
I've combined that with the modal popup box example.
On document ready I get content for the selector from a php-script.
So it's just a for each image in a folder on my server.
This all works fine in all the browsers I tested, as long as I change the
dialogs display style to block via a button-click.
If I change it programmatically after the content has been loaded, the images
will not be visible on Chrome.
I'm using this to show the popup:
$('#myModal').css("display", "block");
In FireFox it works, but in Chrome I just get the borders.
Looking at the network tab in the debugger I can see that the images
are loaded. And doing any visible change to the style will show the images.
This as to do with Chrome not rendering until the images are loaded or something similar, I suppose. But what can I do to fix this?
I'm adding the ability to upload files with the same dialog, and want to update the image picker as soon as the new images are uploaded.
I get the same issue here, the first described methods to reproduce this is just simpler and faster to do.
This issue was solved using the imagesloaded library and a force redraw.
$('.image_picker_selector').imagesLoaded(function () {
document.getElementById('modalImgSelector').style.display = "none";
document.getElementById('modalImgSelector').offsetHeight; //Only ref needed
document.getElementById('modalImgSelector').style.display = "block";
});
This forces a redraw when all the images are loaded.
It's not the best solution maybe, but it works without showing any flickering or anything.
As part of an image gallery I am using the below code to switch out the src attribute on an image element as a user clicks on various thumbnails. Every part of it has been working fine for about 7 months, since I built it, but sometime in the past few weeks this part of the code stopped working:
var nextLgSrc = $('.gallery-image._'+selected).data('lgsrc');
$('.hero-image').attr('src', nextLgSrc);
nextLgSrc is succesfully returning an absolute URL to the image that will be replacing the current one. And the src of the img element is in fact changing when the thumbnails are clicked, but the images no longer change. The first (default) image stay stuck, even though the src attribute is changing underneath it.
Can anyone tell me what might have happened and how to fix it?
Here is a link to the full gallery code to see it in context if that's helpful: http://pastebin.com/mae8YQi2
And actually, here is a link to a page that isn't working: http://penumbralux.com/project/marisol
Becuase when you click on images other than first one,
You are only updating src attribute of img.
When inspecting elements with developer tools on chrome, I noticed that srcset attribute of your main image also needs to be updated. I tried it and its working fine after updating srcset attribute of that image.
<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px">
So in a single sentence, update src and srcset both.
you are using srcset which is used for responsive images on different width browsers. you need to update that as well
Remove srcset and everything would work as expected. And IE does not support it as of today if you wish to work across all browsers. See http://caniuse.com/#feat=srcset
Also it would be a good idea to preload images to make your page more responsive.
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.
I've got a page that contains a list with about 100 images, and i dont want that the browser has to load all of it if the users only views approx. 10 of it.
So i've tried the jQuery.lazyload plugin on my page.
If i write:
$( function() {
$('.list li img').lazyload( { placeholder: 'n.gif' } );
});
for the code:
<ul class="list">
<li><img src="myawesomeimage.jpg"></li>
</ul>
The browser loads the images before the lazyload is applied to the images.
I tried lazyload below the image tags without the document-ready construct - same results
I proxied the image-load through an php script that logs the access to the images - and it still loads everything at the beginning...
Anyone has an idea?
Are you testing this locally or over an internet connection. The only thing I can think of is that if you're developing locally or on a local network, the images will load so fast that the plugin will not execute until after they've already loaded. One way to debug this might be to use the Firebug network tab. Add an $.ajax call to nowhere important before the execution of lazy load and then check out the network tab to see when the AJAX request goes out compared to when the images are loaded. If all is well you'll see the AJAX request before the image requests. If you don't see any image requests, make sure you're viewing the "All" group.
Also, make sure you have caching disabled when testing all of this because otherwise the browser will immediately load the images from cache.
Finally, I noticed that the plugin creator mentions that it doesn't work in IE when paired with jQuery 1.3. What browser are you testing in?
I have found different browsers have different behaviors. Some browsers will preload all the images even with lazyload in place.
If you can control the HTML generation, there is an absolute solution to this.
Output your image tags like so:
<img src=placeholder.png original=myimage.png>
In other words - make the src attribute point to some placeholder image (or omit it entirely), and point the original attribute point to the image you want lazy-loaded.
This will cause the browser to pre-load the placeholder image (best to use just 1 placeholder for all your img tags), and then wait to load the image pointed to by the original attribute. This works on all browsers in my experience.
Maybe it's worth it to check out a plugin called JAIL http://www.sebastianoarmelibattana.com/projects/jail which works well in the same scenario and has the advantage to work in all the browsers and to use data-* attribute.
h
You can read more about it at http://blog.sebarmeli.com/2011/01/04/reasons-why-i-wrote-the-plugin-jquery-asynchronous-image-loader-jail/ and you can find the source code on Github