Webpage stuck in loading in Chrome - google-chrome

My webpage gets stuck in loading in Chrome (the little spinning icon on the page tab, and the mouse cursor also stuck in loading version), but the odd thing is everything in the website displays fine. This doesn't happen in Firefox or IE.
Does anyone have any theory to what's causing it? Is it because some asset doesn't exist? For example:
<img src="pic.png">
But "pic.png" doesn't exist?
If that's the case how do I check the code to make sure all assets, including css/js/img/sound/video files all exist as linked from the document? My html file is huge, going line by line and checking would take forever.

Related

Loading and unloading widget on wordpress site - possible css error?

I am developing a science wordpress website and I am having an issue with a widget. When I load the page the widget quickly loads and then disappears.
This only happens in Chrome and Firefox, and not Explorer for some reason.
It is EXTREMELY strange as this widget was working perfectly for a while, and after changing nothing it stopped. I have disabled all plugins and it still does not work. I even restored my website from a backup when it was for sure working -- still nothing.
A page of the website with the issue (just dummy content) is located here:
http://scientized.com/physics-astronomy/
As one can see it quickly loads the image slider:
Then unloads the image slider:
Any ideas?
EDIT: it appears the problem is intermittent. Please refresh a few times to replicate it if you don't see the error on the first load.

Images published from GitHub Pages not displaying correctly

I am publishing some simple webpages (HTML, CSS, some JS) from my GitHub repository. When I display index.html in Chrome (55.0.2883.95, 64 bit) by clicking on the URL linked in this repository, the webpage is displayed, but as soon as I scroll down, the featured image disappears when it shouldn't.
The other working link is "Fees" at the top. Click on that, scroll up and down the page, and the featured image will similarly disappear.
I want to point out that I first published this repository/page in Nov. 2016 and the images all displayed fine. Recently I changed the domain name associated with the repo but normally wouldn't expect this to create issues. Also, when I simply zip and download the repo and open in Chrome locally, everything displays perfectly.
Lastly, this site works with CSS Grid so I have the appropriate flag enabled in Chrome. It's hard for me to understand why images suddenly don't display correctly using GitHub Pages!
EDIT Sorry if this question seems vague. Let me restate. Everything seems to initially load and display correctly in my browser. The issue seems to be triggered by merely scrolling down the page.
This code used to display correctly on GitHub Pages. I come back two months later and the same code doesn't work anymore. Image pathnames are all correct. It's evidently not a JS issue. Download the same code and it displays perfectly on localhost.
After reading this thread I realized that one of my extensions was causing the page to disappear on scrolling. Specifically, I disabled the Window Resizer extension and the problem was solved.

Page changes not displaying on my computer only

I have come across a strange issue with my company's site, and it seems to only affect my computer. Changes that I have made to the raw HTML are not reflected in my browser (Firefox).
I have taken the following steps to resolving this issue, without any luck:
Ensured that the page was uploaded successfully to the correct directory (downloading the file from the server shows that it is the same file as the one just uploaded).
Cleared my browser history and cache, refreshed the page.
Opened the page in other browsers (IE, and Chrome).
RDP'd into our server and opened multiple browsers that way.
A colleague of mine sits directly across from me and he has opened the page in the same version of Firefox that I typically use and he can see the changes. He and I both work on the site regularly.
The strangest part is that I have made changes to this page before, and they showed on my screen instantly. These changes are still in place and visible, yet some HTML elements that existed before I made those changes do not show on my screen currently (despite still existing in the HTML).
Has anyone else ever experienced such a phenomenon? Is there anything else that I can try in order to resolve this issue?
Have you tried forcing cache refresh? Try it by clicking Ctrl + F5

Including a gif in html page

I have no idea why a simple gif image is not being loaded properly. In the html code I have the usual
<img src="/img/loading.gif" alt="Loading" title="Loading" />
and the file is in that folder. The weird thing is that if I place there /img/logo.png the image is loaded properly.
The filename is correct, I've even copied and pasted it renaming the original files.
PS tested on Firefox 12, Safari 6.0.2 Chrome 23.0.1271.95 (all for Mac)
It was probably a corrupt gif. Your code should work with some other gif. If you really want to get the corrupt gif to work, try opening it in an image editor program and then resave it as gif (or any other format).
Silly question, but what does your gif look like? Is it transparent, or white against a white background?
One possible way to diagnose the problem would be (in Chrome or Firefox), to press F12 to bring up the developer tools and look at your img element to see if the image has loaded in the DOM.
I think the problem was with the gif file, probably somehow broken. I got it from a random resources web site and downloaded from it.
I've tried with a new file got from http://www.ajaxload.info/ now with the code unchanged it works fine.
Edit: the "broken" gif file was working fine elsewhere in the system (e.g. quicklook).

IE - status bar shows loading continuously

I have an razor MVC page - It is loaded via MVC Portable Areas.
When i browse to the index action, everything loads fine, and works as expected.
...But occasionally Internet Explorer continually shows the loading bar in the status bar. The loading never completes, but the page functionality works fine (so it must have loaded all my resources)
I can't replicate this in firefox, and i have checked the Net tab on firebug to look for slow loading resources, but everything looks fine.
I want to try and cause the loading bar to stop after a set time (i know this could be masking a problem, but i can't seem to find out what is going wrong with the page!!)
Is there a way to do this?
IE does that sometimes. Like you said, there is no actual issues except for the loadfing bar being shown.
To confirm that everything is OK, put an alert("loaded") in your $(document).ready();. If it alerts you, the page was successfully loaded and it's just IE being a buggy little... bugger.
Edit: I missed a bit. Continued:
This is ofcourse only the case if you do not have ajax calls etc on the page that can start a loading sequence after the document has loaded. In that case, use the debugger to check for open connections.