Форум

optron · #1 (**permalink**) 30.09.2015, 19:50

Добрый вечер! Есть div блок, в него подгружается фоновая картинка с помощью css. Бывает случается, что изображение не доступно. Как проверить загрузилось оно или нет?

<html>
  <style>
   #img {
    background-image: url([url]http://site.com/img.jpg);[/url]
   }
  </style>
 <body>
  <script type="text/javascript">  </script>
<div id="img">

</div>
 <body>
<html>

sortarray · #2 (**permalink**) 30.09.2015, 20:16

Я не знаю, как идеологически правильно, но сходу сделел бы как-то так

<html>
<head>
</head>
<body>

<div id = "img">some content</div>


<script>

var myImage = new Image
myImage.src = "http://javascript.ru/forum/images/smilies/smile.gif"

myImage.onload = function(){imageLoaded = true}

setTimeout(function(){
  var imgDiv = document.getElementById("img")
  if(window.imageLoaded) return imgDiv.style.backgroundImage = "url(" + myImage.src + ")"
  imgDiv.style.backgroundImage = "url(" + "enotherCoolImageUrl" + ")"
}, 1000)


</script>

</body>
</html>

optron · #3 (**permalink**) 30.09.2015, 20:41

спасибо, работает ))

ruslan_mart · #4 (**permalink**) 01.10.2015, 09:45

var img = new Image();
img.src = 'http://site.com/img.jpg';
if(img.complete) {
    alert('Загрузился');
}

Форум

Справочник

Discord чат

Курсы javascript