preload images / text so when .load is triggered there isnt a delay

Question

im using jquery .load to load in some content and images into a slide out div, but there seems is a delay in loading the images in, so i end up getting placeholder boxs for the images while the panel is sliding out. Is there a way that i can delay the .load function until the content is ready or preload the images so that there wouldnt be a delay in the first place ?

this is what im using to load in the images / activate the slide

google.setOnLoadCallback(function () {
$("#show-services").click(function (e) {
    e.preventDefault;
    $(".content").load("index.html .get", function () {
        $('.hide-content').click(function () {
            $(".content").hide("slide", {
                direction: "right"
            }, 1000);
        });
    });
    return false;
  });
});

Answer 1

You can make the container hidden, then load the images and wait until they're loaded (using an array of Image object whose src are taken from your content and with onload callback and a counter).

Answer 2

You could utilize below approach.

$('#content').load("index.html", function(){
   setTimeout(function(){alert("loaded")}, 3000);
});

Set a timeout after a successful page load.