HTML: How to halt image loading on link click - html

I have a page with a few hundred images. If the user clicks a link while the images are loading, the page isn't refreshed until ALL the images are loaded. A savvy user presses ESC and then clicks the link, but I can't expect my users to do that.
Is there a way to get all other actions to take precedence over the image loading? Do I have to go to some javascript lazy-loading and then ruin the site for non-js users?
Example Page http://metaward.com/6

What browser are you using and what operating system? On my machine, Vista with firefox 3 clicking a link before all images load works just fine.

Related

URL shown in browser while editing page source in HTML

I'm making a tutorial which involves recording my computer screen. I need to click a link that normally directs me to, say https://website.com/page. I want it to redirect me to https://website.com/another_page, which can be easily edited using Inspect Element.
However, when I click the link showing now another_page, I want the URL in browser (Firefox, Chrome) to still be https://website.com/page. Is that possible?
You could do fullscreen in which case the url wouldn't even show. I don't know if that would work with your screen recorder, but it's worth a try. You could also the edit the url directly at the top of your screen so that it shows https://website.com/page and move your keyboard focus away from it so that it appears that the url is https://website.com/page.

How do I completely load a pinned youtube tab in background on chrome startup?

Everytime I startup Chrome with Youtube pinned It doesn't load the youtube page completely until I make the tab active - i.e. I click on it. Interestingly tho it's status according to chrome.tabs.get() is 'complete'.
Here is an example
As you can see, the youtube wasn't loaded until I clicked on it's tab, while stackoverflows website didn't
have to do any loading.
Is there any way I can completely load youtube on chrome startup without explicitly making the tab active i.e. by clicking on it? I tried to execute reload on chrome window startup via chrome.tabs.reload(pinned_tab_id);, but it doesn't help.

Something is wrong in this video about Responsive Design

So I was watching this video about responsive design and something in that video is bothering me. At 2:59 he risizes the window to the large screen and then refreshes and then Safari downloads the banner_large.jpg and when he does the same thing with the medium and small screen sizes, then Safari downloads the banner_medium.jpg and banner_small.jpg respectively. But then one can see that he is able to resize the browser and the banners change accordingly (notice the 'jumps' of the image when the threshold reaches). So the question is that if Safari doesn't download the other two images then how is it able to display them? Am I missing something here?
He has the Network Requests section selected in the Web Inspector. This would only show you when the page sends a request to the server to get a file. He had already resized the page at the beginning of the video, which would have requested the files at that time (assuming they weren't cached from a previous time). So, assuming that caching is turned on, when he resizes the page with the inspector open, it won't request the files again.
In order to show the file sizes, he refreshes the page, which forces the browser to re-download all of the files and show them in the Web Inspector. You can tell he's doing this because when he first opens the Network Requests section, it's empty (because nothing is being requested). Following this, he says, "And then hit reload" and he reloads the page which shows all of the files on the page being downloaded. You can tell that they're all being re-downloaded because in the Cached column, it says No for all files and it's displaying the contents for index.html and other files that would have been cached, such as css files and the background gradient.

Chrome cancels request on link clicking befoe the page totally loaded. And FF doesn't

There is a front-end problem in my web-app:
for example I have a page with plenty of JS code executed on that page. There is a link on it like
Examle Link
I want to click on this link before page is loaded completely and actually I can do it in FireFox. Current page stops to loading and browser redirects me to clicked link.
But in Chrome nothing happens and I have to wait until the page will be fully loaded. In other case I see in DevTools that this request got "status=cancelled"
How can I change Chrome to treat my links in other way?
Chrome users don't want to wait till page is loaded if they want to go further clicking the link...
I had read about prerendering and similar stuff but still have no ideas how to resolve it...
I would appreciate for any hints.

Position of last-visited page

How does websites like Facebook or Stackoverflow remember the position I was at when I navigate away from their site to another site and hit the "Back" button on my browser?
It's not the website, it is the browser. If you have used ID's in your code, the browser will remember approximately which one you were at when you clicked a link.