How can I hide or remove div width and height if div background-image did not display

Question

I have a div I would like to remove the width and height if the background-image used on that div did not show

Below is my code for the background image

<div id="loaderimage" style="background-image: url(domain.com/'.str_replace(' ', '%20',$firstImage).'); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover">;

The expected result is to hide/remove div or div width and height if the background image did not return any image

The
was echo from the PHP while loop
– Zamky Jul 31 '19 at 09:03 — Zamky, Jul 31 '19 at 09:03

score 0 · Answer 1 · answered Jul 31 '19 at 05:07

0

Use multiple background:

background-image: url('http://1stimg.jpg'), url('http://2ndimg.jpg');

If the first not load fallback with the second.

answered Jul 31 '19 at 05:07

red

1,529
1
12
33

that is not what i want. If the first did not load, div should display none – Zamky Jul 31 '19 at 05:20
For what you want you need to check image with Ajax if error is returned change the display of the div. better if you can check directly in backend before the page rendering – red Jul 31 '19 at 05:24

SHUBHAM SINGH · Answer 2 · 2019-07-31T09:17:23.323

0

Javascript

let bg = $('#loaderimage').css('background-image');
    let imgPath = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
    console.log(imgPath);
    if(imgPath ==''){
    $('#loaderimage').hide();
    }

PHP

 <?php

if(!empty(trim($firstImage)) ){ ?> // add your condition here 

    <div id="loaderimage" style="background-image: url(domain.com/'.str_replace(' ', '%20',$firstImage).'); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover">;

    <?php } ?>

edited Jul 31 '19 at 09:17

answered Jul 31 '19 at 05:20

SHUBHAM SINGH

371
3
11

How can I achieve this inside a PHP while loop because the div ('#loaderimage') was echo from the PHP While loop. should I loop the script too with js for loop – Zamky Jul 31 '19 at 09:11

Jaydeep Mor · Answer 3 · 2019-07-31T07:35:41.617

I tried many things and come up to MDN Image() class.

As @red said either we can use Ajax for check image or need to use Image() class.

I have created one class that check image load or not by built in methods from Image() class.

Example

class validateImage extends Image {
   constructor(elementId) {
       super(elementId);
       this.getImageBackground(elementId);
  }

  getImageBackground(elementId) {
      this.elementId     = elementId;
      this.image           = document.getElementById(this.elementId);
      this.style           = this.image.currentStyle || window.getComputedStyle(this.image, false);
      this.backgroundImage = this.style.backgroundImage.slice(4, -1).replace(/['"]/g, "");
      super.src            = this.backgroundImage;
  }

  validate() {
      super.onerror = function() {
          this.removeArea();
      }
  }

  removeArea() {
      this.image.style.height = "0px";
      this.image.style.width  = "0px";
      this.image.style.paddingTop = "0px";
  }
}
// Invalid Image.
var validate = new validateImage("loaderimage");
validate.validate();
// Valid Image.
var validate1 = new validateImage("loaderImageValid");
validate1.validate();

<div id="loaderimage" style="background-image: url(https://homepages.cae.wisc.edu/~ece533/images/arctichare.pngs); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover"></div>
<div>
    Test Second Div.
</div>
<div>
    Test Third Div.
</div>
<div>
    Test Fourth Div.
</div>
<div>
    Test Fifth Div.
</div>
<div>
    Test Six Div.
</div>
<div>
    Test Seven Div.
</div>
<div>
    Test Eight Div.
</div>
<div>
    Test Nine Div.
</div>
<div id="loaderImageValid" style="background-image: url(https://homepages.cae.wisc.edu/~ece533/images/airplane.png); border-radius:3px;overflow:hidden;min-height:100%;width: 100%;padding-top:50%;box-shadow: background-repeat: no-repeat !important;background-position: center !important;background-size: cover"></div>

Fiddle.

This class check image loaded or not and if found any errors then it will remove div's height, width and padding-top.

References

Check if image exists on server using JavaScript?

Javascript: Get background-image URL of

How can I hide or remove div width and height if div background-image did not display

3 Answers3