Openseadragon - Load & remove additional tiled images when zooming in / out

Question

is there any example on how to load & remove additional tiled images when zooming in / out? This way the browser would only have to handle a subset of tiled images (reduced level of detail) & might be more performant.

I tried to figure out how to do this. Its a shame, that I do not have the programming skills to do that :( I ended up with this:

viewer.addTiledImage({
        tileSource: 'g2.dzi',
        x: 0.2,
        y: 0.1,
        width: 0.01,
            opacity: 0
           });  

viewer.addHandler('bookmark-url-change', function(event) {  
  var zoom = viewer.viewport.getZoom();
  if (zoom >= 2) {
        viewer.world.getItemAt().setOpacity(1)
  } else if (zoom < 2) {
        viewer.world.getItemAt().setOpacity(0)
  }
  });

It would be great, if you could help me to get it right. Thanks!

Answer 1

This should work:

// Before this presumably you have made a viewer with a single image.

viewer.addTiledImage({
  tileSource: 'g2.dzi',
  x: 0.2,
  y: 0.1,
  width: 0.01,
  opacity: 0
 });  

viewer.addHandler('zoom', function(event) {  
  var topImage = viewer.world.getItemAt(1);
  if (topImage) {
    var zoom = viewer.viewport.getZoom();
    if (zoom >= 2) {
      topImage.setOpacity(1)
    } else if (zoom < 2) {
      topImage.setOpacity(0)
    }
  }
});

I haven't tested, but it should be the general right idea.