Delete the placeholder image from a div once live content has been inserted into it

Question

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container's HTML length is less than or equal to 0 and then showing the image doesn't work in this scenario because the content is added dynamically without requiring a refresh. I attempted using a setInterval function to continuously check for changes every 100ms, but it resulted in unexpected outcomes and caused flickering on the page.

EDIT**

If it weren't for the necessity of supporting IE8, I would opt for Josh Burgess' approach as my go-to solution. However, due to this limitation, I will resort to using the .hide() method to conceal the image when the click event for adding content is triggered. Thank you for the assistance!

javascript jquery html css

Answer 1

Answer №1

What are the benefits of utilizing jQuery?

Consider implementing this CSS code snippet:

div.myDiv:empty{
  background-image: url(path/to/myimage);
  height: 50px;
  width: 50px;
}

div.myDiv {
  background-image: none;
  height:auto;
  width: auto;
}

--UPDATE--

Check out this functional example on jsfiddle, which also works in reverse

Answer 2

What are the benefits of utilizing jQuery?

Consider implementing this CSS code snippet:

div.myDiv:empty{
  background-image: url(path/to/myimage);
  height: 50px;
  width: 50px;
}

div.myDiv {
  background-image: none;
  height:auto;
  width: auto;
}

--UPDATE--

Check out this functional example on jsfiddle, which also works in reverse

Delete the placeholder image from a div once live content has been inserted into it

Answer №1

Similar questions

Tips for working with elements in WebDriver that are created dynamically by JavaScript

Mongoose documents are set to automatically be deleted after a duration of one month

What is the determined method for calculating the pixel size of an SVG image?

What is the best way to extract all the data from a JSON using a shared key?

Extract specific form data to use in a jQuery.ajax request

Error: Cannot execute 'x' as a function

Unable to utilize console.log and alert functions within the Next.js application

Validating and submitting forms using AJAX

Every fourth list item, beginning with a designated number

Issue with conditional comment in IE 8 not functioning as expected

What methods can I utilize to transmit Global variable data from a view to a controller?

Tips for utilizing window.scrollTo in tandem with react/material UI?

The process of loading the Facebook like script using $.getScript is causing an issue where the

Safari displays text in a noticeably bigger font size compared to other browsers

Error: Attempted to access the 'state' property of an undefined object

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

What is the proper way to mention "a" within an unsorted list?

Dynatree fails to consider the select feature while utilizing ajax requests

"Vue component inputs fail to update when used in the same instance

Several levels piled one on top of the other