WordPress.org

Make WordPress Core

Changeset 32088


Ignore:
Timestamp:
04/08/2015 08:51:39 PM (4 years ago)
Author:
ocean90
Message:

Customizer Theme Switcher: Lazy load theme screenshots.

props westonruter, ocean90.
fixes #31793.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r32087 r32088  
    553553        overlay: '',
    554554        template: '',
     555        screenshotQueue: null,
     556        $window: $( window ),
     557        $customizeSidebar: $( '.wp-full-overlay-sidebar-content:first' ),
    555558
    556559        /**
     
    583586                }
    584587            });
     588
     589            _.bindAll( this, 'renderScreenshots' );
    585590        },
    586591
     
    651656            });
    652657
     658            var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
    653659            section.container.on( 'input', '#themes-filter', function( event ) {
    654660                var count,
     
    660666                });
    661667
     668                renderScreenshots();
     669
    662670                // Update theme count.
    663671                count = section.container.find( 'li.customize-control:visible' ).length;
    664672                section.container.find( '.theme-count' ).text( count );
     673            });
     674
     675            // Pre-load the first 3 theme screenshots.
     676            api.bind( 'ready', function () {
     677                _.each( section.controls().slice( 0, 3 ), function ( control ) {
     678                    var img, src = control.params.theme.screenshot[0];
     679                    if ( src ) {
     680                        img = new Image();
     681                        img.src = src;
     682                    }
     683                });
    665684            });
    666685        },
     
    707726                });
    708727                api.panel.each( function ( otherPanel ) {
    709                     if ( panel !== otherPanel ) {
    710                         otherPanel.collapse( { duration: 0 } );
    711                     }
     728                    otherPanel.collapse( { duration: 0 } );
    712729                });
    713730
     
    719736                    overlay.addClass( 'in-themes-panel' );
    720737                    container.scrollTop( 0 );
     738                    _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
     739                    panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
    721740                    if ( args.completeCallback ) {
    722741                        args.completeCallback();
     
    730749                section.removeClass( 'current-panel' );
    731750                overlay.removeClass( 'in-themes-panel' );
     751                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
    732752                content.delay( 180 ).hide( 0, function() {
    733753                    content.css( 'margin-top', 'inherit' ); // Reset
     
    744764
    745765        /**
     766         * Render control's screenshot if the control comes into view.
     767         *
     768         * @since 4.2.0
     769         */
     770        renderScreenshots: function( ) {
     771            var section = this;
     772
     773            // Fill queue initially.
     774            if ( section.screenshotQueue === null ) {
     775                section.screenshotQueue = section.controls();
     776            }
     777
     778            // Are all screenshots rendered?
     779            if ( ! section.screenshotQueue.length ) {
     780                return;
     781            }
     782
     783            section.screenshotQueue = _.filter( section.screenshotQueue, function( control ) {
     784                var $imageWrapper = control.container.find( '.theme-screenshot' ),
     785                    $image = $imageWrapper.find( 'img' );
     786
     787                if ( ! $image.length ) {
     788                    return false;
     789                }
     790
     791                if ( $image.is( ':hidden' ) ) {
     792                    return true;
     793                }
     794
     795                // Based on unveil.js.
     796                var wt = section.$window.scrollTop(),
     797                    wb = wt + section.$window.height(),
     798                    et = $image.offset().top,
     799                    ih = $imageWrapper.height(),
     800                    eb = et + ih,
     801                    threshold = ih * 3,
     802                    inView = eb >= wt - threshold && et <= wb + threshold;
     803
     804                if ( inView ) {
     805                    control.container.trigger( 'render-screenshot' );
     806                }
     807
     808                // If the image is in view return false so it's cleared from the queue.
     809                return ! inView;
     810            } );
     811        },
     812
     813        /**
    746814         * Advance the modal to the next theme.
    747815         *
     
    833901            section.currentTheme = theme.id;
    834902            section.overlay.html( section.template( theme ) )
    835                            .fadeIn( 'fast' )
    836                            .focus();
     903                .fadeIn( 'fast' )
     904                .focus();
    837905            $( 'body' ).addClass( 'modal-open' );
    838906            section.containFocus( section.overlay );
     
    14981566            this.params.attachment = this.params.defaultAttachment;
    14991567            this.setting( this.params.defaultAttachment.url );
    1500         },
     1568        },
    15011569
    15021570        /**
     
    19171985                api.section( control.section() ).showDetails( control.params.theme );
    19181986            });
     1987
     1988            control.container.on( 'render-screenshot', function() {
     1989                var $screenshot = $( this ).find( 'img' ),
     1990                    source = $screenshot.data( 'src' );
     1991
     1992                if ( source ) {
     1993                    $screenshot.attr( 'src', source );
     1994                }
     1995            });
    19191996        },
    19201997
     
    19262003        filter: function( term ) {
    19272004            var control = this,
    1928                 haystack = control.params.theme.name + ' ' +
    1929                            control.params.theme.description + ' ' +
    1930                            control.params.theme.tags + ' ' +
    1931                            control.params.theme.author;
     2005                haystack = control.params.theme.name + ' ' +
     2006                    control.params.theme.description + ' ' +
     2007                    control.params.theme.tags + ' ' +
     2008                    control.params.theme.author;
    19322009            haystack = haystack.toLowerCase().replace( '-', ' ' );
    19332010            if ( -1 !== haystack.search( term ) ) {
  • trunk/src/wp-includes/class-wp-customize-control.php

    r32086 r32088  
    12491249            <# if ( data.theme.screenshot[0] ) { #>
    12501250                <div class="theme-screenshot">
    1251                     <img src="{{ data.theme.screenshot[0] }}" alt="" />
     1251                    <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
    12521252                </div>
    12531253            <# } else { #>
Note: See TracChangeset for help on using the changeset viewer.