Photo Sphere Viewer切换全景图后浏览器卡顿问题求助

Hey there, let's work through your Photo Sphere Viewer issues step by step—first that "PSV is not a function" error, then the annoying lag after multiple panorama switches.

Why the setPanorama Error Occurs #

Your main problem here is variable scope. When you initialize PSV inside the $(window).load() callback, it’s only accessible within that function. By the time your AJAX success handler tries to call PSV.setPanorama(), it can’t find the instance because it’s out of scope.

Fixing Scope & Using setPanorama Correctly #

First, store your PSV instance in a globally accessible variable (or keep it in the same scope as your AJAX call). This lets you safely call setPanorama without reinitializing the entire viewer. Here’s your adjusted code:

// Store the PSV instance globally so AJAX can access it
let psvInstance;

$(window).load(function(){
  // Initialize the viewer once
  psvInstance = new PhotoSphereViewer({
    panorama: '',
    container: 'photosphere',
    default_fov: 65,
    mousewheel: false,
    loading_img:'img/loader3.gif',
    cache_texture: 0, // Disable texture caching as you already configured
    transition:{duration:1500, loader:true},
  });
});

// AJAX call to fetch and switch panoramas
$.ajax({
  type:'post',
  url:'query/menu_r.php',
  data:{consulta:consulta, codigoFull:codigoFull},
  success:function(data){
    // Clean up path construction with template literals
    const ruta = `content/${recinto}/${vista}/cu${silestone}/${calidad}/${data}`;
    
    // Ensure the instance exists before calling methods
    if (psvInstance) {
      // Switch panoramas without reinitializing the viewer
      psvInstance.setPanorama(ruta, null, true);
    } else {
      console.error('Photo Sphere Viewer instance isn\'t ready yet!');
    }
  }
});

Fixing the Lag/Performance Issue #

Your original approach of using $("#photosphere").empty() and reinitializing the viewer causes memory leaks. Emptying the container removes DOM elements but leaves behind WebGL resources, event listeners, and cached textures that the PSV instance created. Over multiple switches, these build up and slow down the browser.

Using setPanorama fixes this because:

• It reuses the existing viewer instance instead of creating a new one
• It automatically cleans up old textures (especially since you set cache_texture: 0)
• It avoids rebuilding the entire DOM structure each time

Extra Cache Cleanup (If Needed) #

If you still notice lingering cache issues, explicitly clear the viewer’s cache with:

psvInstance.clearCache();

Call this before or after setPanorama to ensure old textures are fully removed from memory.

If You Must Reinitialize the Viewer #

If you have a specific reason to destroy and recreate the instance (not recommended), use the official destroy() method instead of just emptying the container:

// Properly destroy the old instance first
if (psvInstance) {
  psvInstance.destroy();
}
// Empty the container
$("#photosphere").empty();
// Reinitialize the viewer
psvInstance = new PhotoSphereViewer({ /* your configuration options */ });

This ensures all resources are cleaned up before creating a new instance, preventing memory leaks.

内容的提问来源于stack exchange，提问作者Hector