Using the Media Uploader is freezing my dashboard.
-
Here is a link to the code. There is also a further explanation of the problem there.
The scenario:
I am building a widget which uses the Media Uploader to allow a user to select an image on the widgets page (widgets.php). This image is used on the widgets’ front end as a background. Pretty simple concept.The steps to reproduce:
- Go to widgets.php and open the Media Uploader.
- While the Media Uploader modal is open, scroll down several pages so that many images are populated from the Media Library into the modal.
- Without refreshing the browser, close the modal and re-open it. This is where the problem occurs.
The problem that you should be observing at this point: If the user attempts to re-open the media uploader before the page is refreshed, the entire page/browser freezes as it attempts to fetch all the previously AJAXed images. So, the more images that were loaded into the modal when the user first opened it, the longer it will take for the modal to re-open, making it seem like the browser is frozen.
In other words, what I want to happen is this: The Media Uploader needs to start from scratch with only the first few images loaded into the modal. I need to somehow completely destroy the instance of the modal so that every time it is opened, it starts off the same way with only a few images fetched until the user starts scrolling downwards again.
Does anyone know what I can do to fix the freezing problem?
The code is in the link at the top of this post but here is the meat of it:
// 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(); });
- The topic ‘Using the Media Uploader is freezing my dashboard.’ is closed to new replies.