I used some code to display a gif before my page load but it is
increasing my page's loading speed...
Here is where I use that code - http://sarkarinaukrihome.com/
JS
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("fast");;
});
HTML
<div class="se-pre-con"></div>
CSS
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(Preloader_2.gif) center no-repeat #fff;
}
You must resize to the exact desired dimensions of your HTML container and compress all images.
If you look closely at your network flow, you lose a lot of time to load all the images.
If you analyze the performance of your website, Google Chrome gives you recommendations and you have precisely this point mentioned with the possible gain if you perform the suggested actions.
To use the LightHouse Viewer of Google Chrome, read this
For the theoretical concept of image compressing, you can read this
To compress different images, you can use services like this
You can see in the picture below the differents loading times of your website's files...
Your image quiz.png seems quite fat so it will take some time to load it...
As you just use it in a small format, you maybe should reduce its size ! ;)
Also, notes that your website is searching for some LOGO.png that it doesn't find ... ( doesn't really matters though )
With chrome's inspector :
Related
I am using an iframe in my react app to display a pdf, but I want it to all be on one "page" there is a blank "border" separating each page that Id likes to remove entirely.
<div className="full-page">
<iframe title="doc" className="doc" src={file + '#toolbar=0' } frameborder="0" allowtransparency="true">
</iframe>
</div>
This is the CSS I have right now
.full-page {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
}
.doc {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You have two options
One is to change the behavior of every Iframe PDF reader on the Planet, so on the right hand side I can make the gaps bigger or smaller even 0. Thus you need to convince Chromium and Mozilla to do likewise, or provide users with your own binary PDF extender. The Alternative on the Left is to make the Whole PDF one great long roll, since a PDF page can be infinit-ish, that should work practically for a few yards/meters. My longest were 5 mile diagrams at scale but by Jove they were slow to render/scroll.
So I'm looking for the best way to display a loading animation while the rest of my page loads.
I've been looking for a method that allows the animation to load quickly, stops once the website is loaded and the animation is set to display: none, is high quality with good framerate, and works on IE8 and above.
The options that I'm aware of are a gif animation, SVG, plain CSS or javascript. I'm thinking of the animation being as simple as this one, but am not limited to just that. https://d13yacurqjgara.cloudfront.net/users/21046/screenshots/1127381/sample.gif
Which method would best fit my needs?
works on IE8 and above.
Use a .GIF, CSS animation using transforms will not be supported, JavaScript you will have to account for browser differences and SVG I'm not fully sure on.
I've been looking for a method that allows the animation to load quickly,
Any CSS to do with displaying the animation should be placed in the pages mark up (internal), this will ensure that it renders instantaneously on page load.
<style>
#loader{
display: block;
width: 10%;
height: 10%;
position: absolute;
top: 45%;
left: 45%;
background-image: url(loader.gif);
background-size: cover;
}
</style>
while the rest of my page loads
Use JavaScripts .onload function to determine when the content has been fully loaded.
window.onload = function () { document.getElementById("loader").style.display = "none"; }
I have the script from previous stack overflow question on how to pick an image from an array at random.
Script to display an image selected at random from an array on page load
I want to take his idea a bit further, and display this image fullscreen on page load. I am working on a website, and had the idea to use an image as a greeting page. Where, when the page loads, you are greeted with a fullscreen HD image. When clicked, this image would disappear and show the full site. I wasn't exactly sure how to accomplish this though. Any ideas?
Edit: I'm not looking for direct implementation. Just general thoughts or jsFiddles on how to accomplish this task.
For showing the image on the page load you can use $( document ).ready() function. on click() of the image you could show the website.
Try using CSS like,
First option,
img {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
Second option,
img {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
To understand the above options read Perfect Full Page Background Image
I recommend you to use a complete full page background image slider for your problem. If it is available then use it without wasting your time.
I found a full page slider on http://www.freshdesignweb.com/fullscreen-jquery-slider.html in which the first one background slider is best suitable to you.
Also you can go to https://www.google.co.in/?q=full+background+image+slider to get more image sliders
I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}
I am working on a website for a friend, using wordpress. It is located at revere glass. I have installed the NextGen gallery, and am attempting to modify the size of the slideshow via the code, as the plugin editor does not seem to work properly.
When I use firebug to examine the layout, I see:
img src="http://revereglass.seeimpactdesign.com/wp-content/gallery/revere/big-instructor.jpg" style="height: 300px; width: 400px; position: relative; top: 0px; left: 0px; "
The class is .galleryview. I have attempted to edit the .js files, and galleryview.css, but I can't get the slider to change dimensions.
Any help would be greatly appreciated!
Check your markup. Make sure there are no inline styles. You can also try:
.galleryview {
width: your-width-here !important;
}