The problem happen after moving ASP.NET from VS2010 to VS2017.
The problem is, while loading the page on browser, it flickers showing the content same as if css is not applied, and immediately apply it.
Screen shot while loading the page:
Screen shot after loading the page:
I have found the solution for my problem, the solution was to add the links of the css files before the links of the java scripts files in the head section of the page.
Related
I am facing a problem after deactivating the pre-loader. When someone tries to open the website all the menu (Navigation bar) becomes collapse unstylish for a few seconds. After a while when the page has fully loaded the menu gets its style.
I think the CSS file is loading after the website is gets fully loaded, maybe this is the reason. How Can I solve this issue?
put the css inside head tag before any scripts etc,
add preload to your css and critical js files
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
I have index.html and guide.html, I link to the guide.html in the index page. however when i go to the guide one through the link the page won't have the design until I refresh. What am I doint wrong? Each page has its own css.
Here's an image right after I click:
And here's another one right after I refresh:
Could be cached css/html. If it looks right after pressing ctrl+F5 on the page in question, it is working correctly.
Web browsers cache CSS files. I see you're using Chrome for Windows - CTRL + F5 will fully refresh the page, CSS and all.
If this problem appears on a live site for some reason, you could re-name your CSS file to avoid the browser using a cached version. For instance custom.css would become custom-2.css.
I have a website richanime.com and it's a anime based website. The problem is when i load any of my posts the tabs don't load immediately. I've tried to load the jquery and jquery-ui.css internally and still no luck.
It loads a little bit faster on opera and chrome, but on firefox the page loads without and then with the css for the tabs. Can anyone please check it out, here's an example post: http://richanime.net/anime/fairy-tail-2014-episode-46/ (It's the tabs that say "Mp4Upload", "VideoNest" and such.
I use jquery-1.9.1.js and jquery-ui.js while jquery-ui.css loads in my style.css
I use wordpress. The problem lies on opera and and chrome too but firefox the most. Does anyone have any idea how to make it load immediately?
Here's some code: Style.css for tabs only
I've added some the css code that i use for the tabs. Hope it's enough.
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.