Geek asks and answers

Add HTML dynamically with Javascript with <img> tags. How to know when images are uploaded

Let's say that I have a div and you want to introduce some HTML into this div. HTML will contain 1 or more images.

Is there a way using plain JavaScript or jQuery to determine when images are uploaded?

So, if I do the following, can you place an event listener on one element to let you know when content is ready, including images ?:

var html = "<p>Some text <img src='image.jpg' /></p><p>Some more text <img src='image2.jpg' /></p>";
$("div.output").html(html);

Images will be different every time, so I cannot preload using the JavaScript image object.

One of the methods I'm going to do is run HTML code with regular expressions or jQuery, find all the image URLs, skip them, and pre-load each image object. When everyone has been preloaded, then enter the HTML in the output div.

+3
source share
7 answers

If you do not connect an event onloadto each image before loading it and counting, there is no easy way to tell when they are all loaded.

+2
source

(demo), Deferred s, IE 6-9, Chrome 19 Firefox 3.6-10, Opera 10.10-11.52, Android 4, iOS 5.

jQuery, Deferred jQuery. Deferred ; , () timeout .

$.fn.loaded = function(opts) {
    var o = $.extend({timeout:10000}, opts) // Merge default options with supplied options
        , r = []; // Return value

    this.each(function() {
        var dfd = new $.Deferred(), el = $(this), to;
        if (o.timeout) to = setTimeout(function() {
            done();
            dfd.reject();
        }, o.timeout);
        el.bind('load.dfdl', function() {
            done();
            dfd.resolve();
        }).bind('error.dfdl', function() {
            done();
            dfd.reject();
        });

        function done() { // internal clean-up
            clearTimeout(to);
            el.unbind('.dfdl');
        }
        r.push(dfd.promise());
    });
    return r;
};

- , - . 10 ; .

10 placekittens .

var imgs=[];
for (var i = 0; i < 10; i++) imgs.push('<img src="http://placekitten.com/' + rnd() + '/' + rnd() + '"> ');
$('#imgs').html(imgs.join());

, :

$.when.apply($, $('#imgs img').loaded({timeout:10000}) ).done(function() {
    alert('loaded successfully');
}).fail(function() {
    alert('load failed or timed out');
});

$.when Deferred, , Deferred , . , Deferred ( Deferred s), apply . ( $.whenall = function(dfds) { $.when.apply($,dfds); };, $.whenall( $('#imgs img').loaded() )...)

+1

:

$("#preload_div").html(
    '<img src="image.png" alt="preload" class="preload" width="0" height="0">'
);

:

$('preload').load(function () {
    var html = "<p>Some text <img src='image.jpg' /></p><p>Some more text <img src='image2.jpg' /></p>";
    $("div.output").html(html);
});

, . each() , .

: - AJAX , , , "", , , . . http://funl.es/p/1

0

, html.

DEMO

    //Add image
    $('#result').append('<img src= "<Your_Image_URL>" width="300" height="300"/>');

    //Bind handler also add condition to not bind images that was not added before.
    $('#result').find('img').not('.loaded').on('load', function () {
        alert('Image Loaded');
        //Add code that you want to do after the image is added
    }).addClass('loaded');

.load() , ( ) . . :

  • , -
  • WebKit , src src, .
  • DOM
  • , .

: http://api.jquery.com/load-event/

0

, , - HTML- jQuery, URL- , . , HTML div.

var imagesLoaded = [];
var imagesErrored = [];

$('img').each(function() {
     $(this).load(function() {
         imagesLoaded.push($(this).attr("src"));
         if( (imagesLoaded.length + imagesErrored.length) == $('img').length ) {
             displayResults(imagesLoaded, imagesErrored);

         } 
     });
     $(this).error(function() {
         imagesErrored.push($(this).attr("src"));
         if( (imagesLoaded.length + imagesErrored.length) == $('img').length ) {
             displayResults(imagesLoaded, imagesErrored);
         } 

});

function displayResults(imagesLoaded, imagesErrored) {
    for(var i = 0; i < imagesLoaded.length; i++) {
        alert(imagesLoaded[i] + " has loaded successfully.");
        $('#myDiv').append("<img src='" + imagesLoaded[i] + "' />");
    }
    for(var i = 0; i < imagesErrored.length; i++) {
        alert(imagesLoaded[i] + " did NOT load successfully.");
    }
}

, , . , , - . , , "displayResults". .

, DOM. , JavaScript jQuery , DOM .

, , , , , . , , , .

0

jQuery 'on'? 'on' , DOM.

: jQuery docs for'on

pre 1.7 jQuery, "live", 'on' 1.7.

: jQuery docs 'live' ()

0

I think there is no easy way to do this. What you can do is load all the images in a div that is hidden (display: none).

If you want to show the pictures you can take:

$("#myDiv").show();
-1
source

More articles:


All Articles