Question

My first problem :
I am currently using $(window).load to delay the page render in order to load all images and then show it.

It does work with all <img> tags But it is not working with div tags that have background image. Lets say I have 30 image on my website template and 10 of them are from background specified in CSS.

Using the $(window).load function, 20 of those <img> images are loaded before the function fires. But the remaining 10 will be loaded when the page starts showing. So the webpage looks very ugly before it is completed.

How can I include those in my windows.load function?

Second problem:
Because I started making a webpage from scratch for the first time, the pages have a cache issue. I am going to explain what I mean.

The problem is that after I change something in HTML (adding or removing images, etc … ) When I try to reload the page on my browser to see the changes, The web page goes into crazy mode and it’s messed up. Unless I do a Full Refresh ( CTRL + F5 ). It doesn’t matter which browser I am using, The page looks messed up after doing either a small or big change in the HTML code.

This is not something normal in my situation. All website on the www are changing their template or part of their page every day/week and It looks so fine everything to enter.
I haven’t published my website yet, If I go doing changes on the code every time the user will see weird page.

What’s happening ?

Answer 1

For the caching problem you could add a meta element that tells the browser not to cache the page :

<meta http-equiv="PRAGMA" content="NO-CACHE">

For your images, you could preload them and only after the images are loaded in the memory allow the browser to execute some script. An approach would look like this :

$(window).load(function(){
    var elementsWithBg = $('*').filter(function(){
        return (bg = $(this).css('background-image')) != '' && bg != 'none'; 
    });
    var n = elementsWithBg.length;
    function callback(){
        if(n > 0)
            return;
        ready();
    }
    elementsWithBg.each(function(i,el){
        var img = new Image();
        img.onload = function(){
           n--; 
           callback();
        };
        img.src = $(this).css('background-image').replace(/url\(['"]?(.*?)['"]?\)/g,'$1');
    });
});
function ready(){
    // your code goes here
}