Is there a way to hide or remove image while loading a new one, when changing src tag value.
Example code:
<img [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>
In component:
dynamicPath = 'somePath.jpg';
changeSrc(){
this.dynamicPath = 'newPath.jpg';
}
The problem with this code is that after clicking the button, old image is still showing until new image has completely loaded, which is undesired.
Is there a way to remove it or show a hint that new image is being loaded?
Note that: my case doesn't allow solution of preloading many images at once.
You can remove the image from the DOM using *ngIf as below,
<img *ngIf="dynamicPath!=''" [src]="dynamicPath">
<button (click)="changeSrc()">Change Image Src</button>
you can set the variable to empty string ' ' as below
dynamicPath = 'somePath.jpg';
changeSrc(){
this.dynamicPath ='';
this.dynamicPath = 'newPath.jpg';
}
Just hookup the load event of the image.
html
<img [src]="dynamicPath" (load)="onload()" *ngIf="loadingImg">
<button (click)="changeSrc()">Change Image Src</button>
ts
loadingImg = true;
dynamicPath = 'somePath.jpg';
changeSrc(){
this.loadingImg = true;
this.dynamicPath = 'newPath.jpg';
}
onload() {
this.loadingImg = false;
}
you can use *ngIf in the img tag.
<img *ngIf="!loading" [src]="Path">
<button (click)="changeSrc()">Change Image Src</button>
Then you can make decision in the component.
Path = 'somePath.jpg';
loading=false;
changeSrc(){
this.loading =true;
this.Path = 'newPath.jpg';
this.loading =false;
}
Related
fiddle:
https://jsfiddle.net/0r7v923u/2/
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" class="logo" alt="Banner" onclick="ratesD(this)" />
JS:
function ratesD(image) {
if (img.attr('src') == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") {
image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
} else {
image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
}
}
I am simply trying to change the image back and forth on click. The function below changes it but it does not return to the previous image:
function ratesD(image) {
image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png';
}
I thought it only needs to change using img.attr('src') == what do I need to change for the if condition?
First you are trying to access the wrong property of the image object (attr instead of src) and the second function is not checking the current image source before changing it. To fix this, the function should check the current src of the image and change it to the other URL depending on its value. Try this.
function ratesD(image) {
if (image.src == "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png") {
image.src = "https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png";
} else {
image.src = "https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png"
}
}
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" class="logo" alt="Banner" onclick="ratesD(this)" />
It's a bad idea to force load/unload your images (even if they are in the system cache) every time you click on them.
Load them only once, and switch their display at each click.
const bannerImgs = document.querySelector('#banner-images');
bannerImgs.onclick =_=> bannerImgs.classList.toggle('seeOther');
#banner-images > img {
width : 100px;
height : 100px;
}
#banner-images.seeOther > img:first-of-type,
#banner-images:not(.seeOther) > img:last-of-type {
display : none;
}
<div id="banner-images" >
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" alt="Banner" >
<img src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" alt="Banner" >
</div>
This is my folder structure
-- assets
|
- missing.jpg
and this is the function I used to render the movie div
function showMovies(movies) {
main.innerHTML = "";
movies.forEach((movie) => {
const { title, poster_path, vote_average, overview } = movie;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_PATH + poster_path}"
alt="${title}"
/>
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
</div>
<div class="overview">
<h3>Overview</h3>
${overview}
</div>
`;
main.appendChild(movieEl);
});
}
I am trying to change the alt image in this function to display an image in my assets folder instead of just the text title.
If I understand you correctly you want to add an image when there is no image found right?
ok, so there are multiple approaches to this problem, first, if you have an invalid path, use the terniary operator to src your image correctly
src=`${IMG_PATH ? IMG_PATH + poster_path : '/assets/missing.jpg'}`
But... if the image fails to load because of the server being unavailable or some 400/500 error then that's a different story, My personal approach is to make a div with the size of the image and set multiple backgrounds using css properties for instance....
background: url("/path_to_movie_poster.gif"), url("/assets/missing.jpg");
This way if the first source failed for some reason then the default image will kick in.
Make sure your default image is the last in the least otherwise it will be on top.
I have two buttons as Image and Text. based on click of these buttons I want to dynamically add an element to the dom i.e. either TextArea or ImageArea.
Since my HTML code is very lengthy I cant use nativeElement.append(var);
What approach should I use now to append my elements dynamically to the dom.
a correct answer depends on the architecture of your application and what you exactly need. Angular provides many ways to add elements to the DOM. The easiest and what probably solve your problem, is to just use *ngIf, for example:
// component.ts
showImage: boolean = false;
// component.html
<img src="img.jpg" *ngIf="showImage">
<button (click)="showImage=true">Show image</button>
If you want to add several elements to DOM, you can use *ngFor:
// component.ts
images: any[] = [];
addImage() {
this.images.push(this.images.length+1);
}
removeImage() {
this.images.pop();
}
// component.html
<img src="img.jpg" *ngFor="let img of images">
<button (click)="addImage()">Show an image more</button>
<button (click)="removeImage()">Show an image less</button>
Edit:
// component.ts
imagesAndTextarea: string[] = [];
addImg() {
this.imagesAndTextarea.push('img');
}
addTextarea() {
if (this.iamgesAndTexarea.filter(x => x === 'textarea').length >= 12) return;
this.imagesAndTextarea.push('textarea');
}
// template.html
<ng-container *ngFor="let el of imagesAndTextarea">
<textarea .... *ngIf="el === 'textarea'">
<img .... *ngIf="el === 'img'">
</ng-container>
I'm trying to add a mute/un-mute button to my website. I created a panoramic tour using a program called Panotour by Kolor. Thing is I exported it as HTML but can't seem to find the audio tags or anything. I found the file which contains the audio files, I just need a way to mute the music.
.
Here's what I'v done so far.
<div>
<img class="img-responsive" src="Images/muteon.png" id="mute" onclick="toggleSound(this);">
</div>
<script>
function toggleSound(img)
{
if(img.src.match(/blank/))
{
console.log('black');
img.src = "Images/muteon.png";
}
else
{
console.log('blank');
img.src = "Images/muteoff.png";
}
}
</script>
I'm working on a simple project that includes a media (mp3) player in the sidebar. I can get the play/pause button to visually switch and I can turn off the audio by assigning a href to another image however when trying to get the swapped image to pause audio I just can't seem to figure it out, here's my code..
EDIT: deleted shotty code
EDIT: Figured out three ways to do this, the two kind people below posted great ways but I also figured out how to crudely do this via jquery.
$('#left-05-pause_').click(function(){
$('#left-05-pause_').hide();
$('#left-05-play_').show();
});
$('#left-06-audio_').click(function(){
audio.volume = 1;
$('#left-06-audio_').hide();
$('#left-06-mute_').show();
});
Mitch, I have three points for you:
there's no need to wrap <a> around <img>
for performance avoid overuse of selecting elements (like getElementById), because once you've selected a link to the element put it into a variable and use again to access the same element
use native info about element's state (for <audio> in this example) - explore its properties
All in all just try next sample (file names have been changed for clarity):
<body>
<audio id="audioId">
<source src="song.mp3" type="audio/mp3" />
</audio>
<img id="imageId" src="play.png" onclick="toggle()" />
<script>
var audio = document.getElementById( 'audioId' )
, image = document.getElementById( 'imageId' )
function toggle()
{
if ( audio.paused )
{
image.src = 'pause.png'
audio.play()
}
else
{
image.src = 'play.png'
audio.pause()
}
}
</script>
</body>
You can try this
<a href="#">
<img src="http://royaltrax.com/aadev/images/left/images/left_05.png" id="imgPauseChange" onclick="changeImage()">
</a>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgPauseChange").src == "http://royaltrax.com/aadev/images/left/images/left_05.png")
{
document.getElementById("aud").play();
document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05-pause.png";
}
else
{
document.getElementById("aud").pause();
document.getElementById("imgPauseChange").src = "http://royaltrax.com/aadev/images/left/images/left_05.png";
}
}
</script>