Stack Overflow
Stack Overflow

Questions tagged [image-preloader]

172 questions
50
votes
8 answers

The definitive best way to preload images using JavaScript/jQuery?

I'm fully aware that this question has been asked and answered everywhere, both on SO and off. However, every time there seems to be a different answer, e.g. this, this and that. I don't care whether it's using jQuery or not - what's important is…
Skilldrick
  • 69,215
  • 34
  • 177
  • 229
49
votes
10 answers

How to Preload Images without Javascript?

On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images. I don't want to use JavaScript to preload images. Are there any good solutions?
Wasim Shaikh
  • 6,880
  • 18
  • 61
  • 88
26
votes
9 answers

Best way to preload images with Angular.js

Angular's ng-src keeps previous model until it preloads image internally. I am using different image for the banner on each page, when I switch routes, i change main view, leaving header view as it is, just changing bannerUrl model when I have it.…
Yuri
  • 863
  • 1
  • 10
  • 23
11
votes
2 answers

jQuery image preload/cache halting browser

In short, I have a very large photo gallery and I'm trying to cache as many of the thumbnail images as I can when the first page loads. There could be 1000+ thumbnails. First question -- is it stupid to try to preload/cache that many? Second…
Nathan Loding
  • 3,185
  • 2
  • 37
  • 43
10
votes
6 answers

Wait for images to load and then execute all other code

OK, I'm losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me. What I want to do is: wait until all images are preloaded and only then…
Nikola
  • 14,888
  • 21
  • 101
  • 165
10
votes
1 answer

Preloading assets with webpack

I have a preloader that takes an array of image URLs and starts loading the files as soon as my app is opened. Every time I use require() on an image I would like webpack to add that image's URL to the array that my preloader will be using. My first…
Justin
  • 459
  • 1
  • 4
  • 6
9
votes
2 answers

Unfailing Javascript Image Preview

I have the following code that presents the user with a preview of the image they're trying to upload and works really well in FF: var img = document.createElement('img'); img.src = $('#imageUploader').get(0).files[0].getAsDataURL(); The problem…
Jason
  • 51,583
  • 38
  • 133
  • 185
8
votes
2 answers

javascript preloader/progress/percentage

I'm having trouble finding any good information on how to make a javascript(or jquery) progress bar WITH text that tells you the percentage. I don't want a plug in, I just want to know how it works so that I can adapt it to what I need. How do you…
mmm
  • 2,272
  • 3
  • 25
  • 41
7
votes
5 answers

How does the javascript preloading work?

I don't want to know a way to preload images, I found much on the net, but I want to know how it works. How is javascript able to preload images? I mean, I tried a snippet from here, and even if it works, it doesn't seem to preload images. When I…
Boris Guéry
  • 47,316
  • 8
  • 52
  • 87
7
votes
2 answers

jQuery - how to get/read css property on :hover pseudo class

I am working on an image preloader that will preload all images on a page. My approach is as follows: onDomReady, loop through $("*") //go thru all elements when the DOM is ready if $(this).tagName.toLowerCase() == 'img', read src attribute, and…
derek.thompson
  • 71
  • 1
6
votes
1 answer

How would I (or should I) extend Modernizr.load() to preload images?

The idea is that the page /something/index.html is loaded. But, before I show it, its dependencies (css and images in this case) are preloaded. Modernizr.load({ load: ['/something/styles.css', '/something/image1.jpg'], complete: showFile …
nathanziarek
  • 619
  • 1
  • 6
  • 16
6
votes
5 answers

How to preload a webpage before showing it?

I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once. I want instead to first show a "loading" gif in the center of the page and then, when all the images…
xRobot
  • 25,579
  • 69
  • 184
  • 304
6
votes
1 answer

How to preload images for Foundation's Orbit image slider?

Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is…
at.
  • 50,922
  • 104
  • 292
  • 461
6
votes
5 answers

Flexslider - image preloader

I have a problem with my responsive flexslider plugin. The plugin works fine unless you have many images in the actual slideshow. The loading behavior is then just not acceptable. I was hoping someone can help me with the following flexslider image…
Alex
  • 125
  • 1
  • 2
  • 13
5
votes
3 answers

Javascript blocking until image preload complete?

I am using javascript to preload several images with the following code: // do the following for each image where 'this' is the path (new Image()).src = this; This works fine - in firebug I can see each image download being fired off after each…
lok
  • 85
  • 1
  • 3
1
2 3
…
11 12