Question

我将有一些PHP生成一些HTML并填充div。它将加载高分辨率图像，但目前它不应显示或加载它们。

我尝试过显示none，它隐藏了它们但它们仍然被加载到内存中。我将使用JavaScript来获取整个div的内容，然后将它们放在一个不同的窗口（弹出窗口）中，然后加载它们。

我尝试了以下操作，但出于某种原因，当我将它们应用到弹出窗口时，它们不会复制到页面源中，只要它们不在那里...

<!-- <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;

Answer 1

尝试：

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

换句话说，不要将HTML存储在任何地方，只需动态创建即可。

Answer 2

你有没有试过像：

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

这是实现您尝试做的事情的常用方法。 <script>块意味着内容不会被视为HTML或呈现，但其内容可通过常规DOM方法访问。

更好的方法是做你正在做的事情，那就是通过AJAX按需加载图像，甚至只需在JS中创建一个新的Image对象。

Answer 3

如果您非常热衷于之前没有加载图片，那么请尝试将div内容设置为javascript中的变量，并在想要将其添加为innerHtml时使用它。见下文：

<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>

以后使用如下：

popup.innerHTML = popUpInnerHtml;

Answer 4

如果他们被注释掉了，那么代码就不存在了。我没有看到最初加载它们并稍后显示它们的问题。您也可以将它们存储在另一个页面上，然后在您稍后显示弹出窗口时加载它们。见Don't load hidden images

jQuery解决方案：

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

注释掉div，但使用它的内容

4 个答案: