Geek Answers Handbook

How to find out if image was uploaded using javascript

I am coding a website that displays photo albums, the page loads the thumbs and applies white overlays to each image until they are fully loaded.

I encoded this in local and it works great. But downloading files on my server and loading the page brings some display errors, some white overlays do not disappear because the jQuery download function does not start, since downloading images before loading and using the script.

The solution is to apply white overlay only on images that are still loading when running the jQuery script.

My question is, how do I know if the selected item is still on the page or is it fully displayed on the screen?

NOTE: here is the page http://www.benjamindegenne.com/portfolio/numeric/upper-playground/

+5
source share
2 answers

https://github.com/desandro/imagesloaded - uploaded images connected to jQuery will do this for you; -)

+2
source

Update

The previous solution was incorrect. (Thanks to @donut).

Here is an alternative easy way to do this with jQuery -

$(function() {
    $("<img src='img_01.jpg' />").load(function() {
        // Image img_01.jpg has been loaded
    });
});

Javascript

Use image preload in JavaScript -

img1 = new Image();
img1.src = "image.jpg";
// at this line image.jpg has been loaded

After that img1.src = "image.jpg";you can assure that the image is uploaded, and you can write your business logic

JQuery

Here is a simple jQuery plugin for this -

// image preloading plugin
$.fn.preload = function () {
    this.each(function () {
        $('<img/>')[0].src = this;
        // at this line "this" image has been loaded
    });
};

-

var imagesToPreload = ["img01.jpg", "img02.jpg", "img03.jpg"];
imagesToPreload .preload();
// at this line all images has been loaded

a >

+4

More articles:


All Articles