Comment out div, but use it's contents

Question

I will have some PHP generate some HTML and populate a div. It will be loading high res images, but at the moment it should not display or LOAD them.

I have tried display none, which hides them but they are still being loaded into memory. I will be using JavaScript to get the entire div's content later and put them in a different window (popup) which should then load them.

I have tried the following, but for some reason when I apply them to the popup window they don't copy into the page source, it's asif they are not there...

<!-- <div id="print_container2" style="display:none;">
    <div data-type="KR">
        <img onLoad="c++;count_loaded();" id="LKR_1_0" data-quantity="1" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/034.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_2_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_2_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_4_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />
        <img onLoad="c++;count_loaded();" id="LKR_4_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />
    </div>
</div> -->

JavaScript

popup.innerHTML = document.getElementById('print_container2').innerHTML;

It *is* not there, you commented it out. What are you *really* trying to achieve? — TimWolla, Mar 26 '14 at 01:22
Are they still inside comments when you execute the `innerHTML` code? — Praveen Kumar Purushothaman, Mar 26 '14 at 01:22
But they are in the page source so I thought I could still access the code? I just need the PHP to generate the HTML elements but not have them load into memory until I move the elements into the popup window. @TimWolla — Martyn Ball, Mar 26 '14 at 01:23
@MartynLeeBall No, they are not. There is a comment with some text in it, but no elements. — TimWolla, Mar 26 '14 at 01:24
@TimWolla I think he is going for http://stackoverflow.com/questions/3818063/dont-load-hidden-images — Liam McInroy, Mar 26 '14 at 01:24
Can't you just hide the div with CSS without commenting it out? — KevBot, Mar 26 '14 at 01:24
@KevBot the images are still being loaded, just not rendered. — Martyn Ball, Mar 26 '14 at 01:25

StackSlave · Answer 1 · 2014-03-26T01:37:49.983

2

Try:

whatever.onclick = function(){
  popup.innerHTML = <?php echo "'$databaseResult'"; ?>;
}

In other words don't store the HTML anywhere, just create it on the fly.

edited Mar 26 '14 at 01:37

answered Mar 26 '14 at 01:25

StackSlave

10,613
2
18
35

Also if you combine this with @Marty 's then he will have it – Liam McInroy Mar 26 '14 at 01:26
PHP generates the code before the JavaScript is executed – Martyn Ball Mar 26 '14 at 01:28
What does that have to do with your question? PHP can `echo` or `print` any HTML or JavaScript, if you want. Perhaps we should see more code. I need to know what Event you are trying to fire to produce the code that goes into `popup.innerHTML`. – StackSlave Mar 26 '14 at 01:34

Marty · Answer 2 · 2014-03-26T01:34:29.947

1

Have you tried something like:

<script type="text/template">
    // Your HTML here.
</script>

This is a common way to achieve what you're trying to do. The <script> block will mean the contents aren't treated like HTML or rendered, but its content is accessible via normal DOM methods.

A better way to do what you're doing however would be to load the image(s) on demand via AJAX, or even by just creating a new Image object in JS.

edited Mar 26 '14 at 01:34

answered Mar 26 '14 at 01:24

Marty

39,033
19
93
162

Nope, will give that a go now. – Martyn Ball Mar 26 '14 at 01:25

score 1 · Accepted Answer · answered Mar 26 '14 at 01:37

If you're so keen on not loading the images before, then try to set the div content to a variable in javascript and use it when ever you want to add it as an innerHtml. See below:

<script>
    var popUpInnerHtml = '<div data-type="KR">' +
        '<img onLoad="c++;count_loaded();" id="LKR_1_0" data-quantity="1" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/034.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_2_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_2_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/035.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_4_0" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />' +
        '<img onLoad="c++;count_loaded();" id="LKR_4_1" data-quantity="2" src="http://localhost:1234/ppa/php/generateimage.php?imgname=C:/xampp/htdocs/ppa/data/images/20140324/0/037.JPG&restraint=width" class="" />' +
    '</div>';
</script>

And later use this like below:

popup.innerHTML = popUpInnerHtml;

I ended up using the method of changing the attribute src to data-src then changing it when I need to src. But that is also a good way thanks. — Martyn Ball, Mar 26 '14 at 01:45

score 0 · Answer 4 · edited May 23 '17 at 10:31

If they are commented out, then to the code they are not there. I don't see the problem with loading them initially and displaying them later. You could also store them on another page, then from that load them when you show the popup later. See Don't load hidden images

jQuery solution:

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

Comment out div, but use it's contents

4 Answers4