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

What causes a globally declared array to remain empty in the global scope even after data is pushed to it within a callback function?

The main server is not yielding any results from the MongoDB query

Serve unique data to different bots and human visitors using express.js and node.js

Issue with querying and ordering products in Django using Python when passing values through the GET request

Developing a PHP and JQuery Web application that allows the sharing of common files across multiple sub

Using jQuery's "data" method to deselect a checkbox is a simple and effective way to toggle its state

CSS Flexbox: Achieving Perfect Alignment for a Responsive Hamburger Navbar

Trigger a function when a button is clicked

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

Tips on preventing the use of backslashes in JSON output from PHP

Receiving updates on the status of a spawned child process in Node.js

`Loading CSS files in Node.js with Express``

VueJS - Harnessing the power of the Document Object Model for dynamic template rendering

The collapsible menu does not toggle when I tap on the icon

Error encountered while scrolling with a fixed position

Regular expression for selecting characters and numbers in jQuery using a selector

What is the process for changing the URL displayed in the address bar for each individual page?

What is the most effective method to retrieve the UserName using Javascript?

Is it acceptable to employ numerous classes simultaneously?