0

I have implemented a media uploader/selector with the wp.media object using the method described here.

I am facing a problem having to do with large amounts of image files loaded into the modal from the media library. My site has lots of images in the Library and if I let the AJAX load the images into the modal, I notice that there is a huge delay if I try to open the modal again on the same page.

Im trying to find a way to "destroy" the instance so that the delay doesn't happen, but the documentation doesn't seem to be thorough enough. It would be fine if the modal had to start loading images from the beginning every time it was accessed.

Does anyone have any idea how I can accomplish this?

EDIT: Here is the code I am using:

jQuery(function($){

// Set all variables to be used in scope
  var frame,
  metaBox = $('#meta-box-id.postbox'), // Your meta box id here
  addImgLink = metaBox.find('.upload-custom-img'),
  delImgLink = metaBox.find( '.delete-custom-img'),
  imgContainer = metaBox.find( '.custom-img-container'),
  imgIdInput = metaBox.find( '.custom-img-id' );

// ADD IMAGE LINK
addImgLink.on( 'click', function( event ){

event.preventDefault();

// If the media frame already exists, reopen it.
if ( frame ) {
  frame.open();
  return;
}

// Create a new media frame
frame = wp.media({
  title: 'Select or Upload Media Of Your Chosen Persuasion',
  button: {
    text: 'Use this media'
  },
  multiple: false  // Set to true to allow multiple files to be selected
});


// When an image is selected in the media frame...
frame.on( 'select', function() {

  // Get media attachment details from the frame state
  var attachment = frame.state().get('selection').first().toJSON();

  // Send the attachment URL to our custom image input field.
  imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

  // Send the attachment id to our hidden input
  imgIdInput.val( attachment.id );

  // Hide the add image link
  addImgLink.addClass( 'hidden' );

  // Unhide the remove image link
  delImgLink.removeClass( 'hidden' );
});

// Finally, open the modal on click
frame.open();
});

So the question is mainly for what occurs in the "click" event. frame.open() is the part that is causing the problem. i am wondering if there is a way to just start the modal from scratch instead of it trying to load all the AJAXd images after the modal is re-opened.

I hope this makes sense.

  • 2
    you are asking adivice about your code without showing it.... suggested tag "wizard needed" ;) – Mark Kaplun Mar 21 '16 at 18:56
  • @MarkKaplun I have added the code that I am using to this question. – Moose Mar 22 '16 at 16:23

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.