We Keep Coding

Get image src through jQuery .load()?

so I just had a quick question about jQuery .load().
Is there a way I can load the 'src' field of a div on another page into a variable on my current page? So if it is:
<div class="test"> <img class ="image" src="imagelink">
I would like to get the imagelink in my current HTML page using JS / jQuery. I've tried doing ${#loadhere}.load("URL .image") as per the documentation https://api.jquery.com/load/ but it doesn't seem to get me the image link. My plan is to get the link and then $(#loadhere).attr('src', LINK) as per this SO post: jquery changing image src

If all you want is to parse something from another page using $.get() would be more practical as it won't insert anything into the current page unless you want to yourself.
You can wrap the response html in $() and maniplate or query that html the same as you would do in the current page
$.get('otherPage.html').then(function(res){
const src = $(res).find('.test .image').attr('src');
$('#currentPageImage').attr('src', src)
})

How do I use JQuery to wrap a specific image (located in the header) in an anchor tag?

I'm trying to use tag manager to inject jquery on a site in order to make an image in the header link to a specific page on the site. The code is working almost completely across the board, but not 100% (seems odd to me).
The image:
<img class="img-responsive margin-auto" src="/assets/misc/12345/image.png" alt="example" aria-label="example">
The JQuery:
<script type="text/javascript" id="img-link">
$(document).ready(function() {
$("img[src*='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
});
</script>
The image is a direct child of a div for mobile screen sizes and a list item for desktop screens (dealing with website platform here, which is the reason for tag manager.) what am I doing wrong?
Edit: the image is not clickable after the first visit to a certain page of the site (but works as expected on all other pages). unfortunately, due to me having to do this as a workaround the platform that this website is on, a minimal, complete, and verifiable example isn't really feasible.

If I understand what you are trying to do correctly it is to append an image to an anchor tag. You should give the anchor tag an Id: <a id="someId" href='example.com/image-related-page.html'></a> set a variable var img = $("<img>"); img.attr("src", "image.png"); and then with jQuery you could say $("#someId").append(img)

Try this:
$("img[src$='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
replaced * with $ according to Attribute Ends With Selector [name$=”value”]

Simple JavaScript Slideshow with NO preloading

I think this is a very simple question, so forgive me if it's been answered elsewhere. I looked but wasn't able to find what I was looking for. I have very little experience with JavaScript.
I have a many simple JavaScript slideshows contained on a single page that advance via a mouse click. See below for the code I'm using, which I've lifted from one of the introductory JS sites. This preloads each image from each slideshow when a user visits the page. I would like the script to NOT preload each image, and instead load the next image only when the user clicks to advance the slideshow. This is to reduce load time, since most users will not encounter most images. Is there an easy way to convert this into something that doesn't preload each image?
<SCRIPT LANGUAGE="JavaScript">
var i=0
var imgs=["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
function slide(){ {i=i+1} {if (i==5) {i=0}} {document.img.src=imgs[i]} }
</SCRIPT>
And the code for when the slideshow is called:
<IMG SRC="/a.jpeg" NAME="img">
Thanks!
- Patrick

Images start to load once they have a src attribute set, unless (unofficially) the element's css display property is set to none.
So, as long as you don't set the source of the img element or JS Image object, as appears to be the case in the code you posted, the image will not start loading.

Using you images array,
var imgs = ["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
You can do this:
function preloadImages(){
for(var i=0 ; i<imgs.lenght ; i++) {
img = new Image();
img.src = "img/" + imglist[i];
}
}
This function will preload all those images, so when you do the slide() the images are in browser cache.
This method doesn't work in all browsers, so when I need to do this trick, I also use a div with the size of 1x1 pixel (positioned outside the view) with all the images, like this:
<div>
<img src="/a.jpeg" />
<img src="/b.jpeg" />
...
</div>
This will also load all the images as soon as possible...

Ah, thank you all for your responses. They've led me to my answer, which is just that I made a very silly mistake. I misunderstood the results from my website's analytics test, which seemed to indicate that all images were being downloaded into the cache. This was just a goofball misreading of the results that led me on a wild goose chase, which was sustained by my lack of JavaScript understanding. I realized it after going back to the test to respond here. It all behaves as I intended with a minor adjustment. Thank you!

Loading an attribue from element on external page

My page has a list of links that each loads new pages with ajax. These new pages contains a gallery of images and a main image.
My objective is to get the source-url from the main image to show as a thumbnail on the corresponding link on the link page.
I have no idea how to go about this. If someone could point me in the right direction and maybe give me some code to follow I'd be grateful.

You can load an external page with jQuery.get.
$.get('my_external_page.html', function(data) {
// data is the pages contents.
});
Then shove that into a div
$.get('my_external_page.html', function(data) {
// data is the pages contents.
var haystack = $('<div>').html(data);
var needle = haystack.find('.image-we-want');
var imageSrc = needle.attr('src');
});
That's a start. Of course it assumes you can use jquery, and the element you're searching for has a class or ID.

Got it working. Probably not the smartest way to do it, but it works.
I have a page full of links (). I also have an empty div at the bottom of called .
The code loads an icon to these links. The links points to a new pages containing several images. The icons are minified versions of the pages' standard images.
function iconPicHandler(){
var aTags = $('#linkpage a');
for(var i = 0; i < aTags.length; i++){
$('#invisible').load('page3.html #standardImage',function(aLink){
return function(){
$('<img src="'+ $('#standardImage').attr("href") +'" />')
.prependTo(aLink);
}
}
($(atags[i])));
}
$('#invisible').hide();
}
So the first thing I do is get all the links in the linkpage. I put the rest of the code into a for-loop, so I can do the same for all the links.
Then I load " #standardImage" from page3.html into "#invisible". #standardImage" is an empty div containing an url to a minified version of page3's standardImage. The url is held as the div's href attribute.
Then came the tricky part. I'm not sure what I did here. But as a callback function I made a function, that takes one argument, which is specified at the end($(atags[i])). This function then returns a new function! This enabled me to both have access to the atags(links) and the newly loaded $('#standardImage').
Inside the function I extract the href from $('#standardImage') and use it as a src for an image prepended to the link.
At the end, outside the for-loop, I hide $('#invisible').
As previously stated this is not a very smart way of doing this, but it gets the job done. Who knows, maybe it can help the next beginner walking by who just happen to have a similar problem.

Cloning in-memory image in JavaScript /jQuery

This is probably a really simple one but I couldn't find the answer.
I have the following JavaScript/jQuery code where I am trying to create loading messages:
// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
var loadingIcon = document.createElement('img');
loadingIcon.src = '../images/ajax-loader.gif';
window.loadingIcon = loadingIcon; // chache in global var
});
I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?
The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.
I add the loading icon wherever with:
$('#myElem').appendChild(window.loadingIcon);
This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.
I'm assuming I need to clone the element?
I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).

You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.

Try creating the image as a jQuery object:
var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');
And then you should be able to clone it when you need to use it:
$('#myElem').append( $loadingIcon.clone() );

javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.
this should do what you want:
$('#myElem').appendChild(window.loadingIcon.cloneNode());