Preloading large images after page has finished loading [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

I found this bit of code and it works great for preloading, but it totally clogs the page load initially. I've been trying for hours to get this thing to run only after the page is loaded with no success. I've been using one image, "big_image.jpg" (8MB) to test it out. As is, everything preloads using the below code, including the large file. Anytime I attempt to get it to pre-load after the document is ready, it fails. I've even tried other code that purports to do what I want, but they all fail - once the page loads, none will keep loading the really big image. Whats up with that?

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

// Usage:

$(['picture.jpg','background.jpg','vertical.jpg','big_image.jpg']).preload();

Answer 1

Since you found the answer based on my help:

It seems that you are using jQuery. You can wrap the function call inside a ready function: Specify a function to execute when the DOM is fully loaded.

function loadImages(){     
  var img1 = "http://farm3.staticflickr.com/2826/11581275325_d61be12908_h.jpg"
  var markup = "<h3>Images after pageload</h2>"+"<img src='"+img1+"' />";
  $("#images").html(markup);
}

$( document ).ready(function() {
  // Handler for .ready() called.
  loadImages();
});

You may take a look at my codepan example