# id - urls with id first display full page, then move to #id

Question

I've noticed this in the new version of chrome, and ie9 and 10.

Some urls in a photo gallery have a #id tag as they are supposed to display a full view of a picture. Basically, a div in a lower position on the page has that #id that i call via a.com/1.html#id.

This has never been an issue until lately, when i noticed a bit of a lag.

The issue: The website loads normally, then the view moves to the #id as supposed, but with some lag sometimes, perhaps because of the high resolution of the picture, which is somewhat noticeable.

Anyway to avoid this, or make it so the page would move to the correct #id even before fully loaded?

Solution 1

Anchoring with ids is a feature of html4 of which many of the new browsers try to support, practically id behave like anchor name:

The id attribute may be used to create an anchor at the start tag of any element (including the A element).

In the same document says:

The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document. It is permissible to use both attributes to specify an element's unique identifier for the following elements: A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP. When both attributes are used on a single element, their values must be identical.

Since it needs to build a namespace table with all the anchor names, it needs to load all the elements, consequently the entire page before it can jump to that specific link. Much like JavaScript where the code needs to load before it can work.

I don't see any way to make the browser jump to that link before the page has finished loading. And I think behaved the same with anchors names.

The only workaround I can think of is using JavaScript. Load some lower bandwidth nice placeholders and then load the images and big resources after the page has loaded. There are a lot of ways to code that, you have one example here: http://snipplr.com/view/10934/.

Solution 2

This can be annoying. The reason this happens is because the browser treats the # in the url as an anchor and then tries to find the html element who has an id that matches that anchor.

Eduardos answer about using Javascript is the solution. You can use jquery or javascript to change the url hash when a link is clicked to something that does not exist. Then if the user bookmarks the page with that specific hash, the browser will search for a hash that is random and does not exist. Now if you are using fancy js plugins like scroll to or other you would have to modify them to also have the same behavior.

At which point you should ask the question on StackOverflow and be detailed in the code you are using.

Take a look at this simple fix here https://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page

You can also do something like this:

$(function(){
 //Remove the hash
     if (location.hash) {
        window.location = "/"
      }
}

Comments

[bekay]

What's the problem? That when you're lagging the page doesn't move?

[MalaKa]

@Anagio He wants that the browser jumps to the internal anchors # before the page is completely loaded see the answer!

[bekay]

Lazy load the images, the div's should render when the page loads but not the images and the page should jump down to where the picture is then fade in.

[MalaKa]

@Anagio Yes practicaly that's the only solution to load the images or other big „resources” via javascript after the page has loaded.

[riseagainst]

I actually don't quite believe the problem is the images. But the pages sort of blink for a split second, which is when moving from the regular page load, to a # anchor. Perhaps, is it possible to add a sliding function to the anchor?

[MrWhite]

Are you jumping to the #id on the same page, or another page, as suggest by "a.com/1.html#id". Do all images have fixed dimensions as defined by the HTML/CSS?

[riseagainst]

Another page. The images all do have the specs.

[riseagainst]

Thanks for the answer. It works fine on older browsers, but not on the latest ones. I mean, it does, but with some lag sometimes, nothing more than a split second though. It's just annoying to me.

[MalaKa]

@guisasso I know the feeling especially if I link to id's in documentation which has bigger pages an loads more slowly.

[riseagainst]

Thank you very much for that, i'll definitely check that link.

[Casey Chow]

Great! BTW the function I wrote requires jquery.