CODEWITHSUNDEEP
javascripthtml
Martyn Ball
Martyn Ball

Reputation: 4885

Comment out div, but use it's contents

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;

Upvotes: 0

Views: 716

Answers (4)

StackSlave
StackSlave

Reputation: 10627

Try:

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

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

Upvotes: 2

Sandeep
Sandeep

Reputation: 819

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;

Upvotes: 1

Marty
Marty

Reputation: 39456

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.

Upvotes: 1

Liam McInroy
Liam McInroy

Reputation: 4366

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");
   }
});

Upvotes: 0

Related Questions