Image Zoom-In в JavaScript и HTML5

Question

Мне нужно разработать функцию увеличения изображения с помощью JavaScript и HTML5. Каких стратегия будет лучше -

1. Возьмите одно изображение и применить уровень масштабирования - Можно ли загрузить изображение на более высокий уровень масштабирования - 4й и на нагрузке страницы показывает изображения в 1x. При таком подходе изображение будет искажено специально, если у него много текста?

2. Различные изображения для разных уровней масштабирования - это, несомненно, увеличит время загрузки страницы, хотелось бы избежать этого.

Answer 1

Я бы предложил пойти с первый вариант.

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

Во втором варианте эффект масштабирования не будет гладким, так как у вас будут разные изображения на разных уровнях.

Даже если вам не нужно, чтобы это было так гладко, но чтобы избежать загрузки изображения с эффектом масштабирования, вы должны загрузить все изображения до того, как можно будет сделать масштабирование. Но в этом случае будет легче загружать одно тяжелое изображение и плавно масштабироваться, чем иметь несколько изображений с разным размером.

Answer 2

Я думаю, что лучше было бы создавать различные образы для различных уровней масштабирования (таким образом, вы убедитесь, что они всегда будут хорошо выглядеть) и загружать различные уровни масштабирования, только если запрошенные (с AJAX) - таким образом, вы избегайте увеличения времени загрузки страницы.

Answer 3

Определенно второй вариант добавит накладные расходы к сетевому трафику, что приведет к плохой производительности. Таким образом, использование одного изображения, а затем использование уровней масштабирования на нем будет лучше, но с этим вы можете сделать выбор в выборе типа изображения, такого как png, gif и т. Д. (Что вам больше подходит).

На практике png имеют хорошее качество и подходят для такого рода операций.