JavaScript и перетаскиваемые изображения - могу ли я его оптимизировать?

Question

Я работаю над веб-приложением, где у нас очень большое изображение (4000 * 2000 пикселей), которое можно перетащить по месту, увеличить/уменьшить.

Если изображение не увеличено или вышло, его можно перетащить очень быстро, и он отлично выглядит. Как только я изменяю размер изображения на какой-то фактор, перетаскивание становится ужасно медленным.

Я только что заметил, что у меня есть атрибут высоты на изображении, но у меня нет атрибута ширины.

Такое поведение похоже на IE и Firefox по очевидным причинам, оно работает немного быстрее в FireFox.

Я смотрел на GoogleMaps, где у них также были очень гладкие перетаскиваемые изображения.

Какую оптимизацию я могу сделать для достижения аналогичного результата?

Благодарим вас

Answer 1

Google Maps полагается на множество мелких, черепичные изображений, в отличие от одного большого изображения. Таким образом, они могут быть загружены и из памяти, когда вы перемещаетесь.

Простейшим способом оптимизации изображения было бы нарезать его.

Если вы хотите предложить несколько уровней масштабирования, вы также можете рассмотреть возможность рендеринга изображений на разных уровнях, а не полагаться на процесс просмотра браузера во время выполнения.

Кроме того, посмотрите на формат изображения, который вы используете! GIF и PNG предлагают сжатые размеры файлов по сравнению с изображениями, такими как JPEG и TIFF (хотя, очевидно, качество действительно поражает).