У меня есть строки HTML (в левом столбце) со словами, которые я буду использовать, чтобы решить, какое изображение отображать в другом div (центральный столбец). Вот пример позиции:
<li><a href = "" onClick = "showPic(this.innerHTML)">pngName</a></li>
Центральный div гласит:
<div id = "fcenter"></div>
В моем javascript я пишу:
function showPic(picName) {
var img = new Image();
img.src = '/pics/'+picName+'.png'; // get name
var middlePanel = document.getElementById("fcenter");
img.onload = function() {
middlePanel.appendChild(img);
};
}
Он не отображается, хотя у меня правильное имя изображения и он указывает на правильный источник файла.
Функция img.onload
никогда не запустится, потому что изображение еще не было отображено. В целях экономии энергии браузер загружает только отображаемые изображения. Таким образом, вы не можете дождаться загрузки изображения, которое еще не было отображено.
Вот обновленная функция ...
function showPic(picName) {
var img = new Image();
img.src = '/pics/'+picName+'.png'; // get name
var middlePanel = document.getElementById("fcenter");
middlePanel.appendChild(img);
}
Как только изображение появится, браузер начнет его загружать. Если хотите, вы можете запустить img.onload
после того, как образ был добавлен в DOM.
Почему вы пытаетесь сделать это полностью на Javascript? Это может быть ситуация, когда вы обрабатываете событие щелчка в Javascript, а доступ к изображению должен осуществляться с помощью одной или двух строк CSS, реализованных в вашем Javascript. Вот пример:
HTML
<div id = "fcenter">
<li><a href = "#" onClick = "showPic()">pngName</a></li>
<div>
Javascript
function showPic() {
var el = document.querySelector("#fcenter");
el.style.backgroundImage = "url('')";
}
Надеюсь, это поможет вам решить вашу проблему. Если нет, скажите мне, и я постараюсь с вами разобраться.
Удалите img.onload = function() {...}
, но оставьте middlePanel.appendChild(img)
. Когда вы ожидаете, что img
- load
, загрузка включает в себя добавление к DOM, ваш обработчик событий никогда не произойдет, потому что img
никогда не добавляется к DOM. Кроме того, используйте .textContent
вместо .innerHTML
, если вам просто нужен текст, он чище.
function showPic(picName) {
var img = new Image();
img.src = 'http://lorempixel.com/100/100/' + picName;
var middlePanel = document.getElementById("fcenter");
middlePanel.appendChild(img);
}
main {
display: flex;
justify-content: center;
}
img {
display: inline-block
}
ul {
font: 400 32px/2 Consolas;
width: 30%;
list-style: none
}
section {
width: 50%;
}
<main>
<ul>
<li><a href = "#/" onClick = "showPic(this.textContent)">people</a></li>
<li><a href = "#/" onClick = "showPic(this.textContent)">animals</a></li>
</ul>
<section id = "fcenter"></section>
</main>
img.onload = function() {Keep this}
удалите остальное