When I visit the homepage of my site, the header image at the top of the page loads at 90% width, and then expands to 100% width as the page continues to load. If you scroll down, it looks like all elements that are intended to be full-width, initially load at about 90% of their full width, and then go on to expand.
I am trying to locate where in the code this is happening. I thought it might be in the css style sheet but i'm not having any luck locating it. My best guess is there is some sort of wrapper loading before the image expands?
For more info, the image is being pulled in using the WPBakery Visual Composer plugin. I tried turning off the image parallax, which removed the image entirely.
I'm inspecting the source code, but nothing is jumping out to me (my webdev knowledge is extremely basic). I'm looking for any recommendations for where to look in the code.
I'm not sure what is causing the problem, but the source code can be viewed here: https://dev-nurseregistry.pantheonsite.io/
It seems like something from Javascript is loading after the initial page load.
If you go to Google Chrome dev tools -> Sources -> Then (on the right side) choose Event Listener breakpoints and under DOM Mutation check DOMContentLoaded and reload the page, it will load DOM step by step. On the initial load elements have a bit different style - your div.site-inner is not full width.
When you are clicking that little blue play button on the screen, it goes on another step. After 4 or 5 steps the content goes full width. If you look into the network tab (also in the dev tools) you can see that widgets.js and platform.js were loaded and after those also some images. I'd say that you have to look in your js files for something you load after the initial page load.
When comparing loaded page and partially loaded side to side, it shows vc_section hide-mobile as display: block and vc_section hide-desktop as display: none.
Edit
Just read hungerstar's comment - he shows a bit more of the cause. I just found the result of that cause. Hope it helps.
Related
I would like to confirm what effect this CSS code has on the homepage of a wordpress website.
.lazy { display: none !important; }
Many thanks for explanations.
I have noticed images in the homepage are being blocked from being displayed which is why im asking this question.
The CSS code itself, prevent any element which has it from being displayed on the screen.
Due to its name, it may be used to enable something called lazyload (you can read about it here).
lazyload is usually used for several reasons:
Remove the pressure of loading many images at first; sometimes images are placed at the end of the page so the client won't see it at the top of the page, with lazy loading trick it. You can prevent those images from being loaded, and force them to load only the moment your client reach them by scrolling or other events so it cause page loading improvements (because the page is now lighter)
For making some visual effects; almost everywhere you need the image to be hidden and after some juggling or some specific events it is shown (like wp-admin and sub-menus, which will be shown if you hold your mouse on or click them)
etc
Recording to the reasons; I guess your kind of codes (which will be handled in client-side and client browser) does not fit the first reason and may be used for the second one because for the first reason it is better (and I guess it must) implemented on server-side. Why? Because in your code, the image is loaded and be will there and just not shown because of the CSS code
This was all I know but if you want a more specific answer you have to say where you saw it in WordPress, in a plugin, wp-admin, template, etc...
Hope the answer becomes handy for you
I have a ghost-in-the-machine it seems: I have put a thumbnail with a rollover stage on a Wordpress site I'm working on. It works fine except that it does this strange resizing when the page loads. A small but very annoying thing.
This is the page
I've also added the same code to another Wordpress site I am working on, which is based on the same theme (Quark). It doesn't happen on the other site.
How do I resolve this?
You are using percentages to define the widths of the containers and images, which is fine. However, upon initial page load, not all of your elements are available yet, so the relative percentages gradually reach their end-point when the document finishes loading. Doesn't look like like it's doing too much on my screen but in order to get around this you can load the images via jquery and set it to $(document).ready which will wait until the page is done loading, to even load the iamges.
I'm designing an extension for Google Chrome, and I'd really like to earn a little cash from it (if possible) so I'm not eager to post the code in its entirety. I hope this isn't a prohibitive limitation for my question.
I'm injecting a content script into all websites as part of my extension, and part of the content script includes a touch-sensitive overlay; it's an invisible HTML div that's been assigned a swipe listener. The idea is to add swiping functionality to every website on which the script is run.
I'm having issues, though, with the overlay seeming to "die" on certain pages, especially after scrolling down the page. It registers swipes flawlessly all across google.com- scrolling or otherwise- but, for example, seems to die on engadget.com after scrolling down the page a bit. (After scrolling a bit more, it often starts registering swipes again.) Doing something like opening the console (F12) also causes it to start registering swipes, and refreshing the page (to the same place the object was before) lets it start registering again.
The HTML/JavaScript I'm utilizing for the overlay is this:
$("/<div class = \"touch_sensitive_overlay\" style = \"top:40%;opacity:1;position:fixed;height:247px;z-index:99999;width:50%;left:50%;border:2px solid black;\"></div>").prependTo('body');"
I'm using the jQuery Mobile library to register the swipes.
Any helpful insights would be profoundly appreciated.
Update:
A solution was proposed by Sumurai8, and was successfully implemented. The document was listened to for scrolling, and- whenever scrolling occurred- the overlay was removed from the injected HTML, then immediately re-injected. In this way, the overlay is continuously "active," and responds to input on all websites. Thanks for the good thinking, Sumurai8.
You could try to have a small script that does 'something' with the overlay when any element is scrolled. E.g. $('*').on('scroll', function() { $('#overlay').css( {'top': '0'} ); } ); and see if that fixes the problem. While in itself it doesn't do anything, it might make Chrome render your overlay again.
As you said in the comments, removing the overlay and re-appending it will force Chrome to render it again too.
Please see this link. Notice that the search bar first renders near the top of screen. Then aligns itself to be opposite to the logo. I think some css rules are causing this but I am unable to figure out. Can you please help me in pinpointing the reason. What one should avoid in the code to avoid/minimize this behaviour.
This almost aways happens when you have a css rule for blocking that is overwriting the previous. The best thing to do is to have the first thing in the css file to be blocking and normalizing. Every time you need something to be in a place or have a specific size, you should go to the blocking section of your code.
But the most preocupying part of the site you shown is the time it takes to load a fancybox css file.
This issue could just be how each browser loads and renders the content, and also on how fast your network can download content. Since there is many multiple Javascript and CSS files it can just be parsing them slowly and configuring the site as it goes while your network and browser is still downloading and loading everything.
I viewed it in Chrome and Firefox and it seemed to load fine for me.
Have a look at the following site http://www.soe.gr.
The whole page has been built with CSS Page Builder Magic 2 (projectseven.com).
Every button is a link to a different .html page.
However, I do not know why every button press creates a flash effect in the page, the background changes instantly color and generally it gives an impression of abnormal operation. I have not met any site with such behavior except some pages inside projectseven site.
Do you have any idea why that happens? Is it something wrong with Page Builder Magic approach?
I am new to Web Development world and I want to know if there is any problem with these guys.
Thank you very much
I checked it out, it doesn't behave abnormally at all for all those effects you have there, I checked out the size of one of the images it is about 250kb, then imagine the other images which I assume are of the same size, and they are all going to be loaded when the page loads, you definitely should expect some effect