Есть ли способ загрузить текст на изображение с помощью функции загрузки? - PullRequest
Новая
       0

Есть ли способ загрузить текст на изображение с помощью функции загрузки?

1 голос
/ 12 января 2020

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

<body onload = "myFunction()">
<script>
function myFunction() {
  setTimeout(function(){ document.write("<h1>H"); }, 1000);
  setTimeout(function(){ document.write("E"); }, 2000);
  setTimeout(function(){ document.write("L"); }, 3000);
  setTimeout(function(){ document.write("L"); }, 4000);
  setTimeout(function(){ document.write("O</h1>"); }, 5000);
}
</script>
</body>

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

Добавление стиль класса: -

Здесь мы фокусируемся на самом первом изображении, которое содержит .bgimg-1. 

<style>

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 { 
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image: url("Images/Web.jpg");
  min-height: 100%;
}

</style>

<body>

   <div class="bgimg-1">
  <div class="caption">

        <h1></h1>

</div>
</div>

  <script>
          var img = document.querySelector('img');
          var h1 = document.querySelector('h1');


          img.addEventListener('load', myFunction)
          img.addEventListener('error', function() {
            alert('error')
          })


          function myFunction() {
            setTimeout(function() {
              h1.innerHTML += ("H");
            }, 1000);
            setTimeout(function() {
              h1.innerHTML += ("E");
            }, 2000);
            setTimeout(function() {
              h1.innerHTML += ("L");
            }, 3000);
            setTimeout(function() {
              h1.innerHTML += ("L");
            }, 4000);
            setTimeout(function() {
              h1.innerHTML += ("O");
            }, 5000);
          }


        </script>


   </body>

Примечание: - Здесь добавлен только соответствующий код контента ,

Спасибо, введите код здесь

Ответы [ 2 ]

1 голос
/ 12 января 2020

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

var img = document.querySelector('img');
var h1 = document.querySelector('h1');


img.addEventListener('load', myFunction)
img.addEventListener('error', function() {
  alert('error')
})


function myFunction() {
  setTimeout(function() {
    h1.innerHTML += ("H");
  }, 1000);
  setTimeout(function() {
    h1.innerHTML += ("E");
  }, 2000);
  setTimeout(function() {
    h1.innerHTML += ("L");
  }, 3000);
  setTimeout(function() {
    h1.innerHTML += ("L");
  }, 4000);
  setTimeout(function() {
    h1.innerHTML += ("O");
  }, 5000);
}
h1 {
  position: absolute;
  top: 3em;
  left: 1em;
}
<body>
  <img src="https://media.istockphoto.com/photos/friendlylooking-european-teenager-dressed-in-yellow-pulover-saying-picture-id976585934?k=6&m=976585934&s=612x612&w=0&h=C9-wIeuzewmBfBmRU6oSqt9jky9ZOAbB7JHFmH6Bf3k=">
  <h1></h1>
</body>

Редактировать: Обновленный ответ на обновленный вопрос - фоновое изображение не имеет события load, поэтому в Чтобы сделать это, вы должны создать новый объект Image() и установить для него source желаемое изображение. Затем прослушайте это изображение для загрузки. Когда это произойдет, установите backgroundImage вашего div в качестве источника изображения и удалите созданное изображение. 

var img = document.querySelector('.bgimg-1');
var h1 = document.querySelector('h1');

// create image to detect when loaded
var tempImg = new Image(100, 200);
tempImg.src = "https://s14-eu5.startpage.com/cgi-bin/serveimage?url=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2F2ddd441a094881de33cd8b283aec1321%2Ftenor.gif%3Fitemid%3D12124817&sp=286b17e46141fd3ae6dd535ee83d0118&anticache=671261";
document.body.appendChild(tempImg);

tempImg.addEventListener('load', myFunction)
tempImg.addEventListener('error', function() {
  alert('error');
})


function myFunction() {
  // set background-image property to image source
  img.style.backgroundImage = "url(" + tempImg.src + ")";

  // remove image after loaded
  tempImg.parentNode.removeChild(tempImg);

  setTimeout(function() {
    h1.innerHTML += ("H");
  }, 1000);
  setTimeout(function() {
    h1.innerHTML += ("E");
  }, 2000);
  setTimeout(function() {
    h1.innerHTML += ("L");
  }, 3000);
  setTimeout(function() {
    h1.innerHTML += ("L");
  }, 4000);
  setTimeout(function() {
    h1.innerHTML += ("O");
  }, 5000);
}
.bgimg-1 {
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  position: relative;
}

.caption {
  position: absolute;
  top: 0em;
  left: 1em;
  color: white;
  font-size: 1em;
}
<body>
  <div class="bgimg-1">
    <div class="caption">
      <h1></h1>
    </div>
  </div>
</body>
0 голосов
/ 12 января 2020

Вы не должны использовать document.write. Вам также следует избегать использования setTimeout, если вам это действительно не нужно.

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

Вот очень простой пример c. 

const image = document.querySelector('.image');
const message = document.querySelector('.message');

image.addEventListener('load', () => {
  message.classList.remove('hide')
});
.hide {
  opacity: 0;
  pointer-events: none;
}

.message {
  background: white;
  border-radius: 1em;
  padding: 3em;
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 1;
  transition: opacity 0.5s ease-in-out;
}
<img class="image" src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg">

<div class="message hide">
  <p>Hello World!</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...