WordPress.org

Make WordPress Core

Changeset 20031


Ignore:
Timestamp:
02/29/2012 01:17:21 AM (7 years ago)
Author:
koopersmith
Message:

Improve page loads in the theme customizer by layering loading iframes. Automate refreshing, but debounce multiple refresh events to prevent hammering the server with requests. see #19910.

Location:
trunk/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/customize-controls.php

    r20030 r20031  
    7070        <div id="customize-footer" class="customize-section">
    7171            <?php
    72             submit_button( __( 'Refresh' ), 'secondary', 'refresh', false );
    7372            submit_button( __( 'Save' ), 'primary', 'save', false );
    7473            ?>
  • trunk/wp-includes/js/customize-controls.dev.js

    r19995 r20031  
    33
    44    api.Previewer = api.Messenger.extend({
     5        refreshBuffer: 250,
     6
    57        /**
    68         * Requires params:
     
    1214            $.extend( this, options || {} );
    1315
     16            this.loaderUuid = 0;
     17
     18            /*
     19             * Wrap this.refresh to prevent it from hammering the servers:
     20             *
     21             * If refresh is called once and no other refresh requests are
     22             * loading, trigger the request immediately.
     23             *
     24             * If refresh is called while another refresh request is loading,
     25             * debounce the refresh requests:
     26             * 1. Stop the loading request (as it is instantly outdated).
     27             * 2. Trigger the new request once refresh hasn't been called for
     28             *    self.refreshBuffer milliseconds.
     29             */
     30            this.refresh = (function( self ) {
     31                var refresh  = self.refresh,
     32                    callback = function() {
     33                        timeout = null;
     34                        refresh.call( self );
     35                    },
     36                    timeout;
     37
     38                return function() {
     39                    if ( typeof timeout !== 'number' ) {
     40                        if ( self.loading ) {
     41                            self.loading.remove();
     42                            delete self.loading;
     43                            self.loader();
     44                        } else {
     45                            return callback();
     46                        }
     47                    }
     48
     49                    clearTimeout( timeout );
     50                    timeout = setTimeout( callback, self.refreshBuffer );
     51                };
     52            })( this );
     53
    1454            this.iframe = api.ensure( params.iframe );
    1555            this.form   = api.ensure( params.form );
     56
     57            this.container = this.iframe.parent();
    1658
    1759            api.Messenger.prototype.initialize.call( this, params.url, {
     
    3577            this.refresh();
    3678        },
     79        loader: function() {
     80            var self = this,
     81                name;
     82
     83            if ( this.loading )
     84                return this.loading;
     85
     86            name = this.iframe.prop('name');
     87
     88            this.loading = $('<iframe />', {
     89                name: name + '-loading-' + this.loaderUuid++
     90            }).appendTo( this.container );
     91
     92            this.loading.one( 'load', function() {
     93                self.iframe.remove();
     94                self.iframe = self.loading;
     95                delete self.loading;
     96                self.iframe.prop( 'name', name );
     97            });
     98
     99            return this.loading;
     100        },
    37101        refresh: function() {
    38102            this.submit({
    39                 target: this.iframe.prop('name'),
     103                target: this.loader().prop('name'),
    40104                action: this.url()
    41105            });
     
    55119
    56120    $( function() {
     121        if ( ! api.settings )
     122            return;
     123
    57124        var previewer,
    58125            controls = $('[name^="' + api.settings.prefix + '"]');
     
    73140            setting.control.link( setting );
    74141            setting.link( setting.control );
     142
     143            setting.bind( previewer.refresh );
    75144        });
    76145
     
    88157        });
    89158
    90         $('#refresh').click( function() {
    91             previewer.refresh();
    92             return false;
    93         });
    94 
    95159        // Fetch prefixed settings.
    96160        $('[name^="' + api.settings.prefix + '"]').each( function() {
Note: See TracChangeset for help on using the changeset viewer.