I am preparing a website using bootstrap which uses a lots of modals with images. I am concerned about the performance.
I want to know that when exactly the browser loads the modal.
With the page loads?
After the page loads?
On click/trigger event?
As per code flow?
Or something else?
Anyone please explain.
Yes, the modal is loaded when the page loads. However, bootstrap sets its css display property to none (Line 5876 in the bootstrap.css file). display: none means that the element won't be rendered until its display value changes.
What this means:
You should be fine, unless you plan on showing loads of modals at once. And by loads I mean thousands of them.
Related
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;">
Recently, I've been working on a WordPress website powered by the Divi theme and builder. Some of the pages have a menu with the URLs set to ID's of certain sections of the page (anchor links) but when clicked, the page refreshes and then scrolls to the relevant section.
What would cause a page to refresh when an anchor link is clicked? I'm baffled!
I've tried changing the URLs (to the below) but still have the same problem.
https://www.domain.co.uk/tables/#breakpoint-one
https://www.domain.co.uk/tables#breakpoint-one
In static HTML, coding something like this would take a matter of minutes so I cannot understand why the page refresh occurs.
Is the refreshing ocurring only the first time you click on an anchored link? or does it happen every time.
Perhaps you have POST data present (like you arrived on the page after submitting a form). I think the behaviour you describe matches that scenario.
I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.
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 am using Ruby on Rails 3.0.9 and I would like to show a block (that is, something like a popup message - I think it should be a HTML div tag...) in the middle of a page without open a new page.
For example, clicking a link in a page it should appear overriding the current browser page and should have a fixed width. In few words, I would like to implement something as a Facebook "generic dialog popup".
How can I implement that? How I must state HTML and CSS?
There are many, many solutions to modal dialogs in JS.
For example:
http://ssssnakes.com/smoke/
http://jqueryui.com/demos/dialog/
http://onehackoranother.com/projects/jquery/boxy/