UPDATED LINKS
I'm trying to add a loading image on my images while they are loaded, but I don't know why it doesn't want to work for me...
I'm trying the solution's posted here: Loaders java script
I want to add a loading images on the .thumb images while they are loading. Because I'm copying this element when it is loaded and doen't look good while the images are beeing loaded.
I'm not very strong at scripting, so please forgive me...
Here is where I want to place it
Thank you,
UPDATE: In case you have a good internet connection, here is a screenshot of what is happening and what I want to hide, while the images are being loaded.
Related
In Google Page speed I receive a comment to "Prioritize visible content" this appears to be a recent change to the page speed algorithm. In order to try and understand the problem, I created a simple page with only one image and nothing else in the HTML (under my domain), and I still see the same message to "prioritize visible content."
The only way I found to eliminate the error was to convert the image to Base64 and place the image inside the HTML. I think this is not a good solution to the problem, as it will make the HTML heavy and slow the page down.
Are there any other suggestions to solve this problem? Thanks
Usualy this issue shows when you have a lot of external javascript or css files needed by your page to render properly. The ideal solution that eliminates the issue is when you have images and css neded for "above the fold" part of your page placed inline in your HTML document. This allows browser to render visible part of the page immediatelly without making additional requests.
There are different ways how you can achieve this. One way is to load all your css and js asynchronously and inline part of css and js neded for "above the fold" area.
The reason why this issue appears in your test case could be that image takes comparable time to load to the HTML page itself.
You can read more about possible fixes in google documentation on this issue https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent?hl=en
I am currently overwriting the CSS of a webgame I play to give a more pleasant user experience. The only thing that I am having difficulty with is replacing the background image correctly, as the original background image loads onto the screen before the script replaces it to a solid color. The solid color that I am replacing it with loads, but not until after the page loads.
Here is a gif of the issue I am running into.
I have tried using document.onload, .onDomContentLoaded, .ready, etc, but for some reason none of these are working. Is there any way I can prevent the background image from loading before the script is run?
window.onload will wait for all the resources to load.
However, it sounds like you should just add a background-color to the element and let the background render beneath it.
Have you tried the property as important? background-color: gray !important
I think this should prevent the image from showing up at all
Place this in an external Javascript file, and make a request for it before anything else in your head.
var myImage = new Image();
myImage.src = 'your_image_here';
What happens is that an external Javascript file blocks the rendering of the page. And the script itself will not finish till the image has been downloaded. So there won’t be any delay when you do switch the background.
You could use:
document.style.backgroundImage="url('img.png')";
I believe AmmarCSE is hinting at a possible answer, but the cause is unknown.
You should first review your HTML for the order in which your resources are loaded. The CSS is a loaded resource and can specify background colors and images. This will possibly explain the following:
If your CSS specifies colors/image resources, and the HTML loads the CSS resource prior to executing your document functions, you will continue to get this behavior.
You should review the CSS for the background image/color and change it there instead of attempting to override it with document functions.
This is an assumption of the problem. You should provide some HTML, JavaScript, and CSS in your original post to help others answer and review.
i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!
jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect
Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.
Here is my question
I a have one webpage with lot of images including small and big resolutions
both in HTML and CSS I used those images (eg: as background image in CSS classes )
Now I need to load all my images before loading my site I tried to search in google I got many suggestions but in those they are using id class and ect... but I need to load all my images regardless of any class or id.
I need some thing like this
http://www.entheosweb.com/tutorials/css/preloader/Demo.html
help will be really appreciated
thank you...
All you need is onload event on the body tag. It indicates that the page has loaded completely. You need to show some animation covering the whole page until the page is loaded just as mentioned in the link you provided.
Displaying the loader
$(document).ready(function(){
// Display the loader logic
}
Hiding the loader
function hideLoader(){
// Hide the loader
}
<body onload="hideLoader()">
I threw together a quick little microsite that you can see at http://monterraauction.com. If you don't have a super-fast connection (and nothing's cached), the very last items to load are the background-images that are used for CSS image-text replacement (primarily, that h1#head at the top, with a 7kb background image). Nothing debilitating, but it looks slightly awkward. And I'm asking this question as a matter of curiosity more than anything else ;) Also, please note that this occurs in Firefox, but not Chrome.
Now, underneath the h1#head I have a jquery.cycle.lite-powered slideshow in div#photo. In the HTML markup there are a total of 13, heavy image files that make up each of the slides. If I remove all but the first slide, then the problem goes away! So the CSS background-images are loading after...those HTML images are done? But here's what's confusing:
I check it out in YSlow...the CSS background-images have a much lower response time than all of the slides in #photo. Right after all the JS files finish loading, in fact. So why aren't they showing up first?
I tried $('#photo img:last-child').load(function() { alert('Locked and Loaded!')});, but the background-images pop up a while before the alert does, so I'm assuming it's not waiting until the last slide has loaded (admittedly I'm a bit of JS noob so maybe I'm just making a wrong assumption).
I also tried commenting out all the jquery.cycle.lite stuff, so that I knew I didn't have any JS manipulating the DOM elements in #photo, but that wasn't the problem. I tried putting all the JS at the bottom of the document, right before </body>, but that didn't work. Lastly, I tried turning off javascript, and of course the css background-image loads way before the images in #photo, so it's definitely a JS thing (amirite?)
I guess the obvious solution here is to mark the slides up as LINKS rather than IMGs, and have Javascript insert those 12 extra slideshow images after the DOM is ready--users without javascript shouldn't need to download the extra images anyways. But again, I'm curious:
Why does removing the extra HTML images from within #photo solve the problem? And why are the CSS background-images showing up after the HTML images have loaded, even though YSlow says the css background-images loaded first? Seeing as how it happens in FF but not Chrome, is it simply a browser issue?
I appreciate any insight you guys could give me!
What happens if you insert a little script block up at the top of the <head> to pre-load your background images? (Just create new "Image" objects and set the source properties.) I'm not saying that's necessarily a good idea, but it might be an interesting experiment.
(Note that I mean a script block that you intend to be executed at parse time, and not something that sets up a "page ready" handler a la jQuery(function() { ... }).)
Well, I didn't see this issue, even though when I looked at the HTML, all of the <img>s were there. Here's the Net panel for my attempt to reproduce:
http://www.freepichosting.com/graphic/thumbs/322782-2010-04-02-th.png