We Keep Coding

return the first image src of a page with Js?

I'm writing a Google Chrome extension and I want to show the first image of a webpage (for instance: a blog) in the popup.htm. So far I know how to implement the favicon so I was trying to work backwards and edit the favicon into the first image of the page. The problem is the favicon was so simple! All I had to write for a given variable was
function favicon(a)
{
return "chrome.../" +a;
}
Now, I can find the img.src of a background page. But I'm not sure how to find one of a unique page (submitted by the user). I've googled every way my vocabulary permits and so far have come up with this...
function getLavicon(a)
{
/*
find first image on page requested
get url of first image
return url
*/
return $(localStorage.getItem(a)).find('img').first().attr('src');
}
It returns a blank image. Let me know if screenshots are necessary.

Why use jQuery for this ? You can get the first image url on the page by using the following code:
var firstImage = document.getElementsByTagName("img")[0];
console.log(firstImage.src) // This will print out the source of the image on the console
Now you can use the source of the first image whenever you want just by using firstImage.src
Pretty sweet and clean huh ? :)

jquery image load function not being called properly

I am having the following issue in a mobile web application I am developing: In javascript, I have a Image() control and I have an event attached to the image control that should fire when the image gets loaded. Inside of the "pageshow" event for the page, I am setting the src attribute of the Image() to a valid image. If I return to the page, after having visited the page once, the load event for the image is not firing. I have seen several threads say that this can be caused by the image being cached but in my case I am pretty sure that is not the issue. Why doesn't the load event for the image fire and how can I make it work properly?
Code follows:
<script>
var srcImage = new Image();
$(srcImage).on("load", function() {
...
});
$(document).one("pageshow", '#pageid', function () {
srcImage.src = imagepath;
});
</script>

I found the issue, thanks to epascarello (see above comments). I assumed the image file was valid but discovered it was not. When a valid image file is used, the above code works fine.

How to detect progress loaded for GroundOverlay

I am loading 10 GroundOverlays onto a GoogleMap and would like to show the progress associated with loading the images.
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));
var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
How can I detect when the actual image of each overlay has loaded or the % loaded? I'd like to add a progress bar or something to show the user that overlays are loading as it can take 5 seconds or so.

If you have one single image as a groundoverlay, I'd do the following:
Create an img tag through javascript
Set its src to overlays/layer1.png
display a waiting box
Add an onload event to it, on which load it as a gmaps overlay and close the waiting box.
Progress... that's a bit more browser specific. But loading is easy, so:
function loadOverlay(){
var img = new Image();
var img_url = "overlays/layer1.png"
img.src= img_url;
$('#wait_for_overlay').show();
img.onLoad = function(){
$('#wait_for_overlay').hide();
var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);
}
};
Reason why this will work:
Creating an img object and setting its 'src' attribute will make the browser start to download the requested file as soon as the javascript function doing this has finished.
The browser will put this image into its local cache, then call the onLoad function to see what should happen with it.
The callback actually does nothing to the img variable (perhaps it should, make sure it doesn't get wiped out as per closure rules, do a NOP with it if this is buggy), but instead calls the google-maps function.
The google-maps function will request the image at the exact same url, at which the browser will look up its cache table, and bring the image back immediately from cache.
This trick is nasty, but in fact, the google maps engine will do the exact same onLoad thingy in the background (as this is how map engines work).
I hope this satisfies your question... no progress bar, just a loading indicator... Perhaps you could do progress bar by requesting it with XHR and checking progress, I'm not sure, but the trick will be the same: do a faux request, in order to make it arrive to the cache.

I doubt you can do it. You may request for new functions added to the GroundOverlay class in order for the users to have more access and control over the loaded image. I'd like to have those kind of functions for my projects too.

As of 10 years later, 2021 Dec. I can confirm that #Aadaam 's idea works great !
Try my example:
click the example link, try zoom map or pan,
it load image as groundOverlay, the progressing bar show on left panel bottom.
new Image()
is HTML img object, document is here
img_object.onload
is all lowercase, if you write
.onLoad
will give you error.
https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg&center_lat=33.65789936781538&center_long=-116.25862990762825&center_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image

HTML image render notification

In one webpage, I have a big image to load and other contents. Sometimes the image takes longer time to load and I would like to track that. Is there any means by which I can get notified using Javascript when browser completely renders the image?
EDIT
I use the following code to load the image.
<table border="0" style="background-image: url(http://abc.com/abc.jpg);" id="imageDisp">
</table>
SOME More UPDATE
Is there any simple way to know how long the image took to render? Using the javascript I am getting a notification that the image is loaded now, is there a way to know when the image load started? So that the elapsed time can be calculated?

You can hook on the load event of the <img> element. E.g.
<img src="http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg"
onload="alert('finished!');">
Jsfiddle demo.
Update:
Then create new Image() instead (the average browser is smart enough not to request the same image twice and multiple references will point to the same image request):
<script>
var img = new Image();
img.src = 'http://upload.wikimedia.org/wikipedia/commons/3/31/Atlantic_hurricane_tracks.jpg';
img.onload = function() {
alert('finished!');
}
</script>
Another jsfiddle demo (don't forget to clear browser cache, the same image might be already cached :) ).

Remove fragment in URL with JavaScript w/out causing page reload

Background: I have an HTML page which lets you expand certain content. As only small portions of the page need to be loaded for such an expansion, it's done via JavaScript, and not by directing to a new URL/ HTML page. However, as a bonus the user is able to permalink to such expanded sections, i.e. send someone else a URL like
http://example.com/#foobar
and have the "foobar" category be opened immediately for that other user. This works using parent.location.hash = 'foobar', so that part is fine.
Now the question: When the user closes such a category on the page, I want to empty the URL fragment again, i.e. turn http://example.com/#foobar into http://example.com/ to update the permalink display. However, doing so using parent.location.hash = '' causes a reload of the whole page (in Firefox 3, for instance), which I'd like to avoid. Using window.location.href = '/#' won't trigger a page reload, but leaves the somewhat unpretty-looking "#" sign in the URL. So is there a way in popular browsers to JavaScript-remove a URL anchor including the "#" sign without triggering a page refresh?

As others have mentioned, replaceState in HTML5 can be used to remove the URL fragment.
Here is an example:
// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");
// slice off the remaining '#' in HTML5:
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}

Since you are controlling the action on the hash value, why not just use a token that means "nothing", like "#_" or "#default".

You could use the shiny new HTML5 window.history.pushState and replaceState methods, as described in ASCIIcasts 246: AJAX History State and on the GitHub blog. This lets you change the entire path (within the same origin host) not just the fragment. To try out this feature, browse around a GitHub repository with a recent browser.

Put this code on head section.
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>

There is also another option instead of using hash,
you could use javascript: void(0);
Example: Open Div
I guess it also depends on when you need that kind of link, so you better check the following links:
How to use it: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/
or check debate on what is better here: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

$(document).ready(function() {
$(".lnk").click(function(e) {
e.preventDefault();
$(this).attr("href", "stripped_url_via_desired_regex");
});
});

So use
parent.location.hash = '' first
then do
window.location.href=window.location.href.slice(0, -1);

As others have said, you can't do it. Plus... seriously, as the jQuery Ajaxy author - I've deployed complete ajax websites for years now - and I can guarantee no end user has ever complained or perhaps ever even noticed that there is this hash thing going on, user's don't care as long as it works and their getting what they came for.
A proper solution though is HTML5 PushState/ReplaceState/PopState ;-) Which doesn't need the fragement-identifier anymore:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
For a HTML5 and HTML4 compatible project that supports this HTML5 State Functionality check out https://github.com/browserstate/History.js :-)