Как добавить картинку через js

Как добавить картинку через js

Обычно изображения начинают загружаться в момент их создания. Когда мы добавляем на страницу, пользователь не увидит его тут же. Браузер сначала должен его загрузить.

Чтобы показать изображение сразу, мы можем создать его «заранее»:

let img = document.createElement('img'); img.src = 'my.jpg';

Браузер начнёт загружать изображение и положит его в кеш. Позже, когда такое же изображение появится в документе (не важно как), оно будет показано мгновенно.

Создайте функцию preloadImages(sources, callback) , которая загружает все изображения из массива sources и, когда все они будут загружены, вызывает callback .

В данном примере будет показан alert после загрузки всех изображений.

function loaded() < alert("Изображения загружены") >preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);

В случае ошибки функция должна считать изображение «загруженным».

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

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

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

1. Создадим img для каждого ресурса.
2. Добавим обработчики onload/onerror для каждого изображения.
3. Увеличиваем счётчик при срабатывании onload или onerror .
4. Когда значение счётчика равно количеству ресурсов – тогда вызываем callback() .

как загрузить картинку через input

Как сделать так что бы выбранная картинка пользователем, загрузилась в img и реализовать это с помощью javascript. Я в этом новичок, пробовала искать в интернете но варианты не подошли. Буду благодарна за помощь.

Отслеживать

задан 21 сен 2019 в 12:04

user327919 user327919

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Если я все правильно понял, Вам нужен URL.createObjectURL :

 Save  
  

Как картинке добавить ссылку с помощью JavaScript?

Всем привет! подскажите пожалуйста, как Картинкам добавить ссылку с помощью JavaScript ? Есть Картинки и надо сделать чтобы при клике на них был переход по ссылке. Как это можно сделать ? В верстку добавить теги A не могу.
Вёрстку менять не могу
Картинок много. Для всех картинок одна и та же ссылка должна быть

• Вопрос задан более трёх лет назад
• 2891 просмотр

1 комментарий

Простой 1 комментарий

а зачем эта фишка нужна?
Решения вопроса 0
Ответы на вопрос 2
Vadim Bogomazov @bogomazov_vadim

$('img').on('click', () => < location.href = 'https://google.com'; >);

Ответ написан более трёх лет назад
Нравится 1 4 комментария

Михаил @mk3mk Автор вопроса

document.querySelector('.item-img').click(function() < window.location.href = https://google.com'; >);

а так могу написать ? если много картинок

Михаил, Необходимо использовать querySelectorAll
Vadim Bogomazov @bogomazov_vadim

Михаил, в js этот метод(.click()) имитирует клик, а не вешает на элемент обработчик
Прямое решение Вашего вопроса:
HTML:

var a=document.createElement('a'); a.href='http://www.google.com'; var image = document.getElementById('myPicture').getElementsByTagName('img')[0]; b=a.appendChild(image); document.getElementById('myPicture').appendChild(a);

Как избежать блокировку google browser не знаю, так как он такие скрипты подозрительными находит.

Альтернатива через таг html:

Ответ написан более трёх лет назад

Михаил @mk3mk Автор вопроса
а это что-то я такое не видел еще , чтобы два подряд идентификатора
здесь в image что запишется ?

var image = document.getElementById('myPicture').getElementsByTagName('img')[0];

Алексей Ярков @yarkov Куратор тега JavaScript

Михаил, первый найденный тег img внутри тега с id=»myPicture»

как поменять картинку js

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

 id="myImg" src="old-image.jpg" alt="Old Image">  onclick="changeImage()">Change Image function changeImage()  const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> 

В результате выполнения кода выше, картинка на странице будет заменена на новую.