Изменение размера изображения, вызывающее медленную прокрутку

Ответ 1

Эта функция позволит вам изменить размер изображения только один раз, заменив его новым изображением, измененным в нужном масштабе:

function resizeImage(image, maxWidth, maxHeight) {

  // Output scale is the minimum of the two possible scales
  var scale = Math.min((maxWidth / image.width), (maxHeight / image.height))

  // Output canvas
  var outputCanvas = document.createElement('canvas')
  outputCanvas.width = image.width * scale
  outputCanvas.height = image.height * scale

  // Draw image content in output canvas
  var outputContext = outputCanvas.getContext('2d')
  outputContext.drawImage(image, 0, 0, parseInt(image.width * scale), parseInt(image.height * scale))

  // Replace image source
  image.src = outputCanvas.toDataURL()
}

Он принимает изображение, которое вы передаете как параметр image, и создает холст, где он изменяет размер image, а затем устанавливает атрибут image.src в содержимое выходного холста с помощью toDataURL().

Изображения, которые вы изменяете размер , должны находиться в пути RELATIVE (да, это не круто), или у вас будет ошибка безопасности из-за CORS, если она не выполнена.

Но вы можете передавать данные base64 в качестве атрибута src, и это может быть легко сделать с помощью AJAX.

Ответ 2

CSS поможет здесь. Это будет действовать как дефолт и может замедлить индивидуальное время загрузки. Для этого просто создайте базовый CSS для изображений. Ссылка ниже:

 <img src="....." />

Для вашего css вам понадобится следующий код:

 img {
height: 360;
width: 240;
}

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

Чтобы избежать изменения размера, и это, конечно же, поможет изменить размеры изображений в Photoshop. Затем он просто покажет изображение и не отобразит каждое изображение, пока не будут показаны разные части страницы.

Ответ 3

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

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

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

один последний совет также удостоверяется, что вы кешируете. подробнее здесь http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Ответ 4

Большее изображение занимает больше времени для загрузки в память (ОЗУ), даже если изображения уже находятся в памяти (ОЗУ) при огромном потреблении памяти (слишком много больших изображений или есть приложение, которое занимает большую память на фоне) невидимые (за пределами видимой области) изображения попадают в файл подкачки/подкачки (на жестком диске), поэтому, когда изображения попадают в видимую область, браузер загружает это из подкачки/свопинга с скоростью жесткого диска (медленная скорость).

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

вы должны подумать о том, чтобы изменить размер изображений на стороне сервера, либо по требованию, либо предварительно измененному (миниатюре).

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

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

TL;DR: вы не можете иметь гладкую прокрутку со многими большими изображениями на странице, либо использовать миниатюры, либо получать прерывистую прокрутку, если вы настаиваете на том, чтобы не использовать миниатюры.

oh, есть еще одна вещь, которую нужно учитывать, это увеличение объема памяти вашего (и вашего клиента) для обработки таких потребностей памяти

Ответ 5

создать эскизы и связать их с исходными файлами.