desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

problems on firefox mobile #173

Closed haheute closed 9 years ago

haheute commented 9 years ago

Only on mobile firefox (android), I have the problem, that imagesLoaded with collagePlus does not seem to work right.

The collage is broken and it looks as if the function is fired before all images are loaded. I am not sure if the problem is imagesLoaded or the EventEmitter or eventie. collagePlus works without imagesLoaded, so I think it is perhaps not the problem.

here is my code:

$(document).ready(function() {

    //image loading & percent
    function imgpercent(){
        var imagecount = 0;
        var imagestotal = $('.Image_Wrapper').length;
        $('.Collage').imagesLoaded()
            .progress( function( instance, image ) {
                imagecount++;
                var percent = 100 / imagestotal * imagecount;
                $('#progress').text(Math.floor(percent) + '%');
            })
            .always( function( instance ) {
                collage();
                $('#progress').hide();
            });
    };
    imgpercent();

    //random pics
    $('.randpics').imagesLoaded()
            .always( function( instance ) {
                randcollage();
            });
});

The functions collage and randcollage (they are included before the other code without 'document ready function'):

function collage(){
    $('.Collage').removeWhitespace().collagePlus({
        'targetHeight': 250,
        'allowPartialLastRow' : true
    }).fadeTo('fast',1);
};
function randcollage(){
    $('.randpics').removeWhitespace().collagePlus({
        'targetHeight':100,
        'allowPartialLastRow' : true
    }).fadeTo('fast',1);
};

I only have problems with firefox on android. (here --> https://flavuur.de ) Does somebody have similar problems, or a solution?

haheute commented 9 years ago

Is there a general difference between 'desktop firefox' and firefox mobile, perhaps a different javascript engine ?

I have tried with Windows 8 + firefox and archlinux/gnome + firefox which worked, and android + firefox on a fairphone and android + firefox on a samsung smartphone, which both produced a 'destroyed' image-collage. So I thought, there could be a difference between firefox and firefox for android, but I don't know where. Sorry if this is a bit offtopic.

haheute commented 9 years ago

it seems, that i had another function that called collage() before all images were loaded.

    $(window).bind('resize', function() {
        if($(window).width() != width){
                   //start collage
        }
    });

it should rearrange the photos, when the browser-window is resized, but i think it fired too early, perhaps because of scrollbars (?). I have built this around it, now it seems to work:

$(window).bind('load', function() {
    //rearrange photos
});