We Keep Coding

How to implement lazy load for an SVG image element?

Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done.
Example:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" xlink:href="img1.jpg"/>
</svg>
</div>
And the JS coding:
// This works fine
var img = jQuery("#myimg");
img.attr('src', img.attr('data-src'));
img.on("load", function () {
img.removeAttr('data-src');
});
// This doens't work, onload will not be processed, image will not be not shown
var image = jQuery("#myimage");
image.attr('xlink:href', image.attr('data-href'));
image.on("load", function () {
image.removeAttr('data-href');
});
The scripting will leave the page in this way:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<br>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/>
</svg>
</div>
Why is onload not working for this SVG image element?

You have several small mistakes:
<image/> is a self-closing tag,
xlink:href should be used without xlink: prefix,
it's better to set eventListener before you changing attribute.
See the snippet:
var image = jQuery("#myimage");
image.on("load", function () {
console.log('loaded');
image.removeAttr('data-href');
});
image.attr('href', image.attr('data-href'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<image id="myimage" width="150" height="150" data-href="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg"/>
</svg>

Here is my solution to the same problem where I keep using the xlink:href attribute for the raster image to show inside the SVG, but still lazy-load on click. I'm using different lazy-load plugin (jquery.lazy.js) but it's very similar:
<svg>
<image id="lazy-img" class="lazy" width="" height="" data-source="myimage.jpg" />
</svg>
$('.someElement').on('click', function() {
var image = $('#lazy-img");
image.attr('xlink:href', 'myimage.jpg');
image.attr('href', 'myimage.jpg');
});
The idea is that the initial HTML markup is for the lazy-loading images and on click event we are swapping the markup back to work with SVG, after the image is lazy-loaded.

Change img src from parent anchor href

I have 150+ Links with internal image tag. Like this :
<img src="LINK2" width="60" height="45" border="0">
Now what i want is to image src LINK2 to LINK1 on page load. So the output will be :
<img src="LINK1" width="60" height="45" border="0">
My jQuery code so far :
$("img").attr("src",$("img").parent().attr("href"))
Thanks.

itsgoingdown is correct - you want to use a .each() fn to do this, but I would attack it the other way around:
$("a").each(function(){
$(this).find('img').attr("src", $(this).attr("href") );
});

For the attr src value, you can include function which will return href from the parent <a> for each image, this way you don't need to loop trough that img collection twice.
$("img").attr("src",function(){
return $(this).parent('a').attr("href");
});

DIV Conditioning - Checking if an IMG exists within a DIV

I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example

Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.

Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');

Add an image id by finding the image alt

There is an image without an id on a page that I can't manually access to change the html. I'd like to be able to add an id value in a javascript file that I do have access to.
I found this thread:
Finding An image tag using the alt text
And this one:
Replace image and image title/alt text with Javascript
And I've been trying a few variations to get it to work.
Can someone show me where I'm going wrong? I'm currently using:
$('img[alt="close_pop"]').attr('id','close');
I don't think I'm fully understanding, as this is what I thought it was doing:
$('img[alt="close_pop"]') //getting the image based on the alt tag using jquery.
.attr('id','close'); //then I was applying a new id to that image.
All help appreciated!

Inspect the element and search for the id. It gets alt's value:
$(window).load(function() {
var img = $('img[alt="test"]');
var alt = img.attr('alt');
console.log(alt);
img.attr('id', alt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img alt="test" src="" />

<img src="smiley.gif" class="smile" id="smiley" alt="Smiley face" width="42" height="42">
$(window).load(function(){
$("img").click(function() {
var img = $("img[alt='Smiley face']");
img.attr("id", "fool");
console.log(img.attr("id"));
});
});

JS : Getting image id using onmouseover

i have 4 images in my document , 1 at the top and three at the bottom now what i want when i hover over any of the bottom 3 images i get its id and replace the above image with this image using onmouseover , like this
<script >
function chanageimg(id)// here i want to pass hovered image src
{
document.getElementById("top_image").src=id;
}
</script>
<div id="top" >
<img src="top.jpg" id="top_image" />
</div>
//here is the bottom image ,
<div class ="floats one">
<img src="img1.jpg" id="img1" onmouseover="changeimg()" />
</div>
how do i get its src to be passed in aboce function . i dont want to use Jquery . here as its for learning purpose

One small change to your HTML:
<img src="img1.jpg" id="img1" onmouseover="changeimg(this.id)" />
this is the image being moused over, and this.id is the parameter you want to pass to your function.

Inside the function changeimg(e), use e.target.id to get the id. If you do this, you don't need to add this.id to every onmouseover="" in your images. Just use onmouseover="changeimg".

To change the image you have to change the src
<img id="img-top" src="">
<img src="img1.jpg" onmouseover="changeimg(this.src)">
function changeimg(src){
document.getElementById("top_image").src = src;
}
EXAMPLE