3
\$\begingroup\$

I am fairly inexperienced when it comes to jQuery/JavaScript, so although the following code works, I am just looking to understand if my use of looping, deferred/promises etc could be optimised at all.

Purpose of code

This is just part of a larger script, which I have written to load images and its written details into a viewer. This code loads the initial image, or if an image hasn't been previously preloaded.

The deferred part of the code specification is to allow multiple images (on the single slide of the viewer) to be loaded before the slide is shown.

$galleryImageDetails.css({ 'opacity' : '0' });
$galleryImage.css({ 'opacity' : '0' });

$('.loader').show();
                                                    
if ( preloadedArray[entryId] ) {
                        
    beingPreloaded = entryId;

} else { 
    
    $('.image-title h1').html(entryTitle);

    if ( entryProcess ) {
        $('.image-process span').html(entryProcess);
        $('.image-process').show();
    } else {
        $('.image-process').hide();
    }
    
    if ( entryDimensions ) {
        $('.image-dimensions p').html(entryDimensions);
        $('.image-dimensions').show();
    } else {
        $('.image-dimensions').hide();
    }

    $('.image-price p').html(entryPrice);   

    preloadedArray[entryId] = [];
    
    preloadedArray[entryId].push($('<img src="'+imagePath+'" />'));                                                                                                                                         

    $.each(entryVariants, function (key, val) {
                                        
        var variant = $('<img src="'+val[0]+'" />');
        
        preloadedArray[entryId].push(variant);
        
    });
    
    $('.image-variants .wrapper').empty();
    
    var preloadedArrayLength = preloadedArray[entryId].length;
    
    var preloadsComplete = [];
                                
    $.each( preloadedArray[entryId], function( key, value ) {
      
        var result = $.Deferred();
        preloadsComplete.push(result.promise());    
      
        preloadedArray[entryId][key].on('load', function() {
                
            if ( key == 0 ) {

                var imageWrap = '<a href="'+entryImagePopup+'" data-fancybox="images" data-caption="'+entryTitle+'"></a>';

                $galleryImage.html(preloadedArray[entryId][key]);   
                $('.gallery-image > img').wrap(imageWrap);

            }
            
            if ( key > 0 ) {
                
                variantLarge = entryVariants[key][1];
                variantName = entryVariants[key][2];

                var variantWrap = '<div class="col-6 bp3-col-4"><a href="'+variantLarge+'" data-fancybox="images" data-caption="'+variantName+'"></a></div>';

                $('.image-variants .wrapper').append(preloadedArray[entryId][key])
            
                $('.image-variants .wrapper > img').wrap(variantWrap);
                                                                            
            }
            
            result.resolve();       
            
        });
        
    });

    $.when.apply($, preloadsComplete).done(function () {

        $('#item'+entryId).attr('data-image-loaded', 'y');
        imagePreload(); 
                                            
        $('.loader').hide();
                                        
        $galleryImageDetails.css({ 'opacity' : '1' });
        $galleryImage.css({ 'opacity' : '1' });
                
        prevNextLock = false;

    });     

}
\$\endgroup\$
0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.