I would like to change src attribute of my image and then read the width of the new image. Unfortunately JQuery load() function seems to fire before the image is loaded and width is set. Do you have any idea how to fix it?
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(buildLoad(rc));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Try the onload event
$(document).ready(function(){
var rc = $('img.myimg');
rc.load(function(e){
console.log("Height:" + e.currentTarget.height, "Width:" + e.currentTarget.width)
});
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Specifically in your code the problem was that you called the buildLoad(rc) regardless of the load event. What you needed to do is call a wrapper function that will run once the load was done:
rc.load(function() { buildLoad(rc) })
function buildLoad(rc){
alert(rc.width());
}
var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(function() { buildLoad(rc) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">
Regardless - there are several known issues regarding the load event on images among current browsers which you can read more about here.
Use Jquery one function.
http://api.jquery.com/one/
Try the following code.
$("img.myimg").one("load", function() {
// Get width of the image
}).attr("src", "New path");
Related
I created a script that changes an image when you click a button. The problem is with clicking again, because the src attribute remains the same. I would like after clicking again the source of the photo to go back to the initial src. I tried to do it using toggle method, but with positive effect.
My code:
$(document).ready(function(){
$('#button').click(function(){
$('.logo').attr('src', 'http://domena.com/logo-1.jpg');
});
});
I tried to solve it that way, but I failed.
$(document).ready(function(){
$('#button').click(function(){
$('.logo').toggle(
function() {
$(this).attr('src', 'http://domena.com/logo-1.jpg');
},
function(){
$(this).attr('src', 'http://domena.com/logo-2.jpg');
}
);
});
});
You can pass the URL of new image in an attribute of <img>, then you can get the current image ie src and next image(data-new) and interchange their values, like so -
$(document).ready(function(){
$('#button').click(function(){
let curr_img = $('.logo').attr('src'); // get current image
let new_img = $('.logo').attr('data-new'); // get new image to be shown
$('.logo').attr({'src': new_img, 'data-new': curr_img}); // interchange their values
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- give next values as an attribute ie data-new here-->
<img src="https://w7.pngwing.com/pngs/247/564/png-transparent-computer-icons-user-profile-user-avatar-blue-heroes-electric-blue.png" class="logo" data-new="https://image.flaticon.com/icons/svg/21/21104.svg" style="width: 150px; height: 150px;">
<br>
<button id="button">Toggle image</button>
Hope it helps you.
im trying to get the images to be placed in side the div so h/w can be controlled and i can seem to get it to work with jquery 3.2.1 it only works with jquery 2.1.1, is there an better way of write this code, i was trying to have a simple click "next" div and change image with loop.
$(function() {
var images = [
"http://placehold.it/300x150/f0f&text=1"
,"http://placehold.it/300x150/cf5&text=2"
,"http://placehold.it/300x150/b15&text=3"
,"http://placehold.it/300x150/c59&text=4"
,"http://placehold.it/300x150/ac2&text=5"
,"http://placehold.it/300x150/bb5&text=6"
];
// ======================================
var tot = images.length;
var c = 0; // current image
function loadImage(){
$("<img/>").attr("src",images[c]).load(function() {
$('#gallery').html( this );
});
}
loadImage(); // for the page load
$('#prev').click(function(){
id=this; c--;
c=c==-1?tot-1:c%tot;
loadImage();
});
$('#next').click(function(){
id=this; c++;
c=c==-1?tot-1:c%tot;
loadImage();
});
});
#gallery{
width:150px;
height:50px;
background:#ddd;
margin-top:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagination">
<div id="prev" class="btn" style="position:">PREV</div>
<div id="next" class="btn" style="position:">NEXT</div>
</div>
<div id="gallery">
</div>
The use of load() as an event binding was removed in 3.X. It is now only for fetching resources, with the first parameter being the url of the resource to retrieve.
http://api.jquery.com/load/
"Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it."
Use on('load') instead.
Substitute
$("<img/>").attr("src",images[c]).on("load", function() {
$('#gallery').html( this );
});
for
$("<img/>").attr("src",images[c]).load(function() {
$('#gallery').html( this );
});
I am wondering how is it possible to look for an specific image on a page and replace it with some other image on page load.
for example, I have this on my site :
<img src="/content/public/1472.png">
I want to find this image and change it with the below value on page load :
<img src="/content/public/1473.png">
Use attr() or prop() in ready function :
$(function(){
$('img[src="/content/public/1472.png"]').attr('src', '/content/public/1473.png');
//$('img[src="/content/public/1472.png"]').prop('src', '/content/public/1473.png');
})
Hope this helps.
$(function(){
console.log('Before : '+$("img").attr('src'));
$('img[src="http://www.drodd.com/images15/1-4.png"]').attr('src', 'http://www.drodd.com/images15/2-4.png');
console.log('After : '+$("img").attr('src'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.drodd.com/images15/1-4.png">
$(function(){
alert("By default image path is:"+$('img').attr("src"));
if($('img').attr("src")=="/content/public/1472.png") //to find the image
{
$('img').attr("src","/content/public/1473.png");
alert("changed image src is:"+$('img').attr("src"));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/content/public/1472.png">
Is this what you want.
Here is my code:
HTML
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction($(this))">
<img src"../MyPic_2" id="MyImg_2" onclick = "MyJQfunction($(this))">
<img src"../MyPic_3" id="MyImg_3" onclick = "MyJQfunction($(this))">
JQUERY
<script>
function MyJQfunction(MyField)
{
MyField.hide();
}
</script>
As you can see I'm trying to send the HTML element to my JQ Function so it knows what to hide.
What am I doing wrong?
NOTE: This is just a simple example of what I really need to do, I just want to avoid including codes that you don't care about. Thanks!
You are using jquery so attach an event handler instead of using onclick
<img src="../MyPic_1" id="MyImg_1" class="myIMage">
<img src="../MyPic_2" id="MyImg_2" class="myIMage">
<img src="../MyPic_3" id="MyImg_3" class="myIMage">
and
$(function(){
$('.myIMage').on('click', MyJQFunction);
}
function MyJQFunction()
{
$(this).hide(); //here this represents the element clicked.
}
Or classic way; use Function.call to set the context for the function while invocation.
<img src"../MyPic_1" id="MyImg_1" onclick = "MyJQfunction.call(this)">
and
function MyJQFunction()
{
$(this).hide(); //and this here is now the clicked element.
}
Also in your code your image tag seems to be incorrect and MyJQfunction versus MyJQFunction has casing (note the casing of f) issue. Check your console for errors. Otherwise your code should work.
This is what I would do:
<img src="../MyPic_1" id="MyImg_1" class="image_to_hide"/>
<img src="../MyPic_2" id="MyImg_2" class="image_to_hide"/>
<img src="../MyPic_3" id="MyImg_3" class="image_to_hide"/>
...
<script>
$(".image_to_hide").click(function(){
$(this).hide();
});
</script>
You should wrap that on jquery function like this
function MyJQFunction(MyField)
{
$(MyField).hide();
}
Is there something wrong with this code? I am trying to do the simple action of changing the src of an img named "midimg" upon mouse-click. It's not working and i don't know why
<script type="javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
</script>
<div onClick="buttonInCompany()">Everything is cage's cage.<br><br></div>
<img name="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">
Do you need the jQuery line? I just dropped it, than it works as expected.
function buttonInCompany()
{
document.images["midimg"].src="http://cageme.herokuapp.com/css/mrcage.jpg";
}
Seeing as how you are apparently already using a js framework (I assume jQuery), why not do it a more proper way to begin with?
<script type="text/javascript">
function buttonInCompany()
{
$('#desc').load('incompany.html');
$('#midimg').attr("src","http://cageme.herokuapp.com/css/mrcage.jpg");
}
$(document).ready(function() {
$("#someID").click(function() {
buttonInCompany();
});
});
</script>
<div id='someID'>Everything is cage's cage.<br><br></div>
<img id="midimg" src="http://3.bp.blogspot.com/-BdfyYy_Y0gY/UP_3y3F2RDI/AAAAAAAAC-Q/eHPCltO8bG8/s1600/TomEngelsnicolas+thing.jpg">