Changing img src in angular 6 not displaying new image until it's been fully loaded
I'm having some unexpected behavior with my angular app when I update an image's source and I'm hoping someone can help me out.
I have something like this:
<img [src]="imageUrl" />
and update imageUrl in my component whenever users click a button to see the next image. This works.
When the first image loads I see it loading from top to bottom.
However, subsequent images don't display this way. When I change the imageUrl variable, I can see the url change in another place on the screen, but the actual image does not change until it's fully loaded, and then it pops in to place.
So my question: Is there some way to make the subsequent images load in the same manner as the original? Some of my images can be quite large, and are useful to users before they're 100% loaded, so I'd really like for them to be able to see them as they load if possible.
I tried using document.getElementById and then updating the src attribute that way, and it seemed to perform the same way unfortunately. If I do something like this:
const container = document.getElementById('imagePlaceholder');
const img = document.createElement('img');
container.innerHTML = '';
img.setAttribute('src', this.imageUrl);
container.appendChild(img);
It does load the way I'd like.
Any ideas?
edit: Found some good example images for what I'm talking about from here. First image loads like this, and then the subsequent images load like this (without the loading indicator)
edit 2: Figured out a better workaround. Using *ngFor and putting imageUrl as the only thing in it gets the desired results. Still weird, but much better than fiddling with the dom.
imageUrls = [ this.imageUrl ];
...
<img *ngFor="let url of imageUrls" [src]="url" />
javascript
angular angular6 asked Nov 22 '18 at 22:28
lngshtlngsht
62
|
show 5 more comments
I'm having some unexpected behavior with my angular app when I update an image's source and I'm hoping someone can help me out.
I have something like this:
<img [src]="imageUrl" />
and update imageUrl in my component whenever users click a button to see the next image. This works.
When the first image loads I see it loading from top to bottom.
However, subsequent images don't display this way. When I change the imageUrl variable, I can see the url change in another place on the screen, but the actual image does not change until it's fully loaded, and then it pops in to place.
So my question: Is there some way to make the subsequent images load in the same manner as the original? Some of my images can be quite large, and are useful to users before they're 100% loaded, so I'd really like for them to be able to see them as they load if possible.
I tried using document.getElementById and then updating the src attribute that way, and it seemed to perform the same way unfortunately. If I do something like this:
const container = document.getElementById('imagePlaceholder');
const img = document.createElement('img');
container.innerHTML = '';
img.setAttribute('src', this.imageUrl);
container.appendChild(img);
It does load the way I'd like.
Any ideas?
edit: Found some good example images for what I'm talking about from here. First image loads like this, and then the subsequent images load like this (without the loading indicator)
edit 2: Figured out a better workaround. Using *ngFor and putting imageUrl as the only thing in it gets the desired results. Still weird, but much better than fiddling with the dom.
imageUrls = [ this.imageUrl ];
...
<img *ngFor="let url of imageUrls" [src]="url" />
javascript
angular angular6 asked Nov 22 '18 at 22:28
lngshtlngsht
62
2
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04
|
show 5 more comments
I'm having some unexpected behavior with my angular app when I update an image's source and I'm hoping someone can help me out.
I have something like this:
<img [src]="imageUrl" />
and update imageUrl in my component whenever users click a button to see the next image. This works.
When the first image loads I see it loading from top to bottom.
However, subsequent images don't display this way. When I change the imageUrl variable, I can see the url change in another place on the screen, but the actual image does not change until it's fully loaded, and then it pops in to place.
So my question: Is there some way to make the subsequent images load in the same manner as the original? Some of my images can be quite large, and are useful to users before they're 100% loaded, so I'd really like for them to be able to see them as they load if possible.
I tried using document.getElementById and then updating the src attribute that way, and it seemed to perform the same way unfortunately. If I do something like this:
const container = document.getElementById('imagePlaceholder');
const img = document.createElement('img');
container.innerHTML = '';
img.setAttribute('src', this.imageUrl);
container.appendChild(img);
It does load the way I'd like.
Any ideas?
edit: Found some good example images for what I'm talking about from here. First image loads like this, and then the subsequent images load like this (without the loading indicator)
edit 2: Figured out a better workaround. Using *ngFor and putting imageUrl as the only thing in it gets the desired results. Still weird, but much better than fiddling with the dom.
imageUrls = [ this.imageUrl ];
...
<img *ngFor="let url of imageUrls" [src]="url" />
javascript
angular angular6 asked Nov 22 '18 at 22:28
lngshtlngsht
62
I'm having some unexpected behavior with my angular app when I update an image's source and I'm hoping someone can help me out.
I have something like this:
<img [src]="imageUrl" />
and update imageUrl in my component whenever users click a button to see the next image. This works.
When the first image loads I see it loading from top to bottom.
However, subsequent images don't display this way. When I change the imageUrl variable, I can see the url change in another place on the screen, but the actual image does not change until it's fully loaded, and then it pops in to place.
So my question: Is there some way to make the subsequent images load in the same manner as the original? Some of my images can be quite large, and are useful to users before they're 100% loaded, so I'd really like for them to be able to see them as they load if possible.
I tried using document.getElementById and then updating the src attribute that way, and it seemed to perform the same way unfortunately. If I do something like this:
const container = document.getElementById('imagePlaceholder');
const img = document.createElement('img');
container.innerHTML = '';
img.setAttribute('src', this.imageUrl);
container.appendChild(img);
It does load the way I'd like.
Any ideas?
edit: Found some good example images for what I'm talking about from here. First image loads like this, and then the subsequent images load like this (without the loading indicator)
edit 2: Figured out a better workaround. Using *ngFor and putting imageUrl as the only thing in it gets the desired results. Still weird, but much better than fiddling with the dom.
imageUrls = [ this.imageUrl ];
...
<img *ngFor="let url of imageUrls" [src]="url" />
javascript
angular angular6 javascript
angular angular6 asked Nov 22 '18 at 22:28
lngshtlngsht
62
asked Nov 22 '18 at 22:28
lngshtlngsht
62
edited Nov 23 '18 at 0:17
lngsht
asked Nov 22 '18 at 22:28
lngshtlngsht
62
asked Nov 22 '18 at 22:28
lngshtlngsht
62
asked Nov 22 '18 at 22:28
lngshtlngsht
62
62
2
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04
|
show 5 more comments
2
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04
2
2
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438656%2fchanging-img-src-in-angular-6-not-displaying-new-image-until-its-been-fully-loa%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438656%2fchanging-img-src-in-angular-6-not-displaying-new-image-until-its-been-fully-loa%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
save your images as "interlaced" or "progressive" depending on the type. That should do it.
– Randy Casburn
Nov 22 '18 at 22:34
You might preload the images, so you'd not load them on click.
– Kosh Very
Nov 22 '18 at 22:56
@RandyCasburn - Just tried this, but it didn't seem to change anything. I still see the first image load top to bottom, and all subsequent images just pop in to place eventually.
– lngsht
Nov 22 '18 at 22:59
@KoshVery - I do preload the next image, which definitely helps, but sometimes people need to skip over multiple images. There are a lot of images, so preloading all of them is not an option.
– lngsht
Nov 22 '18 at 23:02
Where do you get images from? third source?
– Maihan Nijat
Nov 22 '18 at 23:04