Such a thing: on the page there is a gif-image, which should be shown during ajax-loading of content. The image is written in the html-code

<img src="img.gif" id="img" style="display: none">

Before loading the data, I show it in the diva:

 $('#myDiv').append($('#img').show());

After downloading the content in the same div, as I understand it, the image is removed from the DOM. And I can't reuse it. I tried to display not the image itself, but its clone, but probably there is a more concise solution.



    1 answer 1

    If you need reusable gifs, then yes, that's right, you need to copy it:

     $('#myDiv').append($('#img').clone().show());

    Only I would copy on the class so that in the tree house there would not be 2 elements with the same id.

    It is possible to create and store an object in code, not in HTML, but before inserting it, you still need to copy it, or save it before inserting new content:

     var loader = $('<img/>').attr({'src':'img.gif'}).hide(); $('#myDiv').append(loader.clone().show());
    • Yes, I divorced with diva, the class should be used. Thank you for debunking my doubts. - Deus
    • one
      @Vitalii Vaslianok, by the way, if you make the global loader variable (window.loader) in your example, you will not need to copy it, the object reference is not destroyed in this case. - Deus