I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.
The header is actually a part of a carousel of images. Here is the code I am working with:
Vision Web Design
...
I have tried reducing my images to a smaller size but no luck there. Looking for any help available.
J.P.
This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.
Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:
A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:
var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}
And then in the HTML add the following div surrounding all the content of your webpage:
<div id="allcontent" style="display: none;">
Related
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
I created a new repo and uploaded all the files but the images in my div id="Container" inside my index files are not showing up. https://github.com/hkhan194/tres-chic/tree/gh-pages
I looked into all other questions regarding this matter and tried them but still no image showing.
#Hkhan I have tried the link in IE and Google Chrome,
In IE:
Your website is working fine, the images are getting displayed.
In Google Chrome:
The images are not getting displayed and when i checked the console ,I am getting this error
Error:
Mixed Content: The page at 'https://hkhan194.github.io/tres-chic/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution:
It seems that Google chrome is not allowing acceptance of the script from the url you have mentioned for the JS.
So the "mixItUp is not a function" error is getting thrown since the mixItUp function is from the former JS file.
So you could save that javascript file as "jquery.mixitup.min.js" in your github in a specific path and then include the javascript in the tag in your index file as shown below,
<script src="Your path/jquery.mixitup.min.js"></script>
First off, this isn't really a GitHub pages question. GitHub pages simply hosts your files. This is really a question about the HTML.
Secondly, you'll have much better luck if you post a MCVE. In your case this would be a smaller test page that only displays a single image.
That being said, I recommend going to the resulting HTML file: https://hkhan194.github.io/tres-chic/
Right-click anywhere in that page, and then go to "Inspect Element". That will open up a window that lets you explore the page elements, see any errors you're getting, and see what's going on over the network. I'm using Chrome, but every browser should have something very similar.
On the Network tab, notice that some of your image files aren't being found. These seem to be the result of misspellings: JPG or jpeg instead of jpg, that kind of thing.
Then on the Elements tab, find your products grid. Notice that its height is 0, which doesn't seem right. Then go into the div class="mix category-*" tags and notice that they all have a display of none!
The problem is that your CSS is setting #Container .mix to display:none, which is going to prevent them from being shown.
Please try to get into the habit of exploring your page using this window, and try to understand the difference between what GitHub Pages is doing and what your HTML is doing. If you have further questions, please try to narrow your problem down to a smaller example page. Good luck.
In page load start-up Google Chrome show me just page layout (like blew image) and after one second inject content like text and font-icon and etc.In your opinion, this problem related to my html, css or js? or Do you have any suggestion to resolve this problem?
When a web page loads, does the content with display:none affect the load time?
I have a huge list in html with about 600 links assigned so the html page alone comes to around 450kb(excluding images~150kb), while the stipulated size of a page according to our server is 300 kb.
But the lists are divided into 4 main lists which toggle between display none to visible.
i.e.when list 1 is visible others are hidden.and so on.
So I was wondering how the load time of the html page would be affected by this.
Thanks.
Yes,It does affect the load time.
I too tried this on my own website,It took some time to load.even if the div was hidden
I suggest you to load it dynamically,using jquery or ajax ,put all those menu item or what ever images in a separate html file,and call it whenever required.
Save's load time but More Coding
Yes, because it is loading the full html. You can see the html code in the browsers code inspector. And you see the images in the hidden-tags was loading.
You can prevent this by using javascript. Only load the images when clicking the active tab.
Yes, it does. The browser loads html and parses also the hidden elements. They are also part in the internal "element-tree" of the browser. Otherwise you wouldn't be able to reference them e.g. via JavaScript to modify them.
Yes of couse it affects the load time visibility in the DOM. The ammount to download is still the same.
To improve this you could use:
Pagination (will_paginate in Rails, https://github.com/onassar/PHP-Pagination php)
Infinite scrolling(will load the content dynamically during scrolling)
AJAX loading of the lists
I'm trying to eliminate the white flash between loading local pages within my iOS Phonegap app.
I've tried everything but I still can see white between page loads.
I've tried making my html background black, using data-transition=none and also making the webView backgroundcolor clear.
I've put::
NSLog(#"BEGIN EDIT - set webView to transparent");
[self.webView setBackgroundColor:[UIColor clearColor]];
[self.webView setOpaque: NO];
NSLog(#"END EDIT - set webView to transparent");
In the CDVInAppBrowser.m , in the CDVViewController.m and in the AppDelegate.m but nothing seems to work! Maybe I'm placing the code in the wrong position.
Please someone just help me get rid of the white between page loads!
PhoneGap loading can be quite slow. You may need to use the splash screen API to show and hide splash? http://docs.phonegap.com/en/2.8.0/cordova_splashscreen_splashscreen.md.html#Splashscreen
On the page above, also pay attention to iOS Quirk section. Alternatively, have you try single page application with jQuery Mobile or AngularJS?
I had the same problem when I made a mobile application with Phonegap.
I don't know how do avoid these flashes but when you've built a simple app with only a few screens you could implement all your HTML documents into one file like:
<html>
<body>
<div class="page" id="page-1">
Content of page one
</div>
<div class="page" id="page-2" style="display:none;">
Content of page two
</div>
<div class="page" id="page-3" style="display:none;">
Content of page three
</div>
</body>
</html>
Now you could switch between the contents of each container by making it visible/invisible for the user.
The idea behind this solution is that all of your app's content will get loaded once (at the beginning) and with jQuery you will switch between the content without these white flashes when the webbrowser has to render the new page the user has been redirected to.
This is a good solution only when your app does not contain too much contents.
like I said, making the app a single file was not possible in this case due to the complexity of it and I don't mind if the white flashes between page loads are black since they don't take long. Here's the solution I've found using Phonegap 2.8 for iOS:
In the CDVViewController.m
- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
// Black base color for background matches the native apps
theWebView.opaque = NO;
theWebView.backgroundColor = [UIColor blackColor];
//the rest of the code…
Hope it's useful to someone else.