javascript - 仅当包含他的 div 可见时才加载 php 页面

Question

我制作了某种购物车，当我按下表格行时，它会打开有关该商品的一些详细信息，为此，我使用了一个高度为 0 且首先隐藏的 div，其中包含详细信息，问题是我认为无论是否按下该行，浏览器都会加载信息页面。有没有办法让浏览器仅在他的DIV可见时加载页面？

    $int = 0;
            echo "<table class=\"result_table\" id=\"result_table\">";
    foreach($types as $data){
        echo "<tr onClick=\"present(".$int.");\" >";
        echo "<td align=\"right\">";
        echo $data['number'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['item_name'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['amount'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo "17";
        echo "</td></tr>";
        echo "<tr class=\"info_row\"><td colspan=\"4\"><div      id=\"div_num_".$int."\" style=\"height:0px\">
            <object type=\"text/html\" data=\"page.php\"            style=\"width:100%; height:100%; margin:0%;\">
            </div></td></tr>";
        $int++;
    }
    echo "</form></table>";

行的 CSS

.info_row{
    visibility:hidden;
}

JS:

function present(item_id){  
    var div = document.getElementById("div_num_"+item_id);

    if(div.style.visibility=="visible"){
        div.style.visibility = 'hidden';
        div.style.height= '0';
    } else {
        div.style.visibility = 'visible';
        div.style.height= "200px";      
    }
}

因为您可以看到所有信息随页面一起加载，但不可见。 解决这个问题的其他好方法将被应用，特别是如果它不包括jquery，因为我在这方面并不强。

提前致谢。

Answer 1

首先，如果没有太多信息需要加载，那么预加载数据可能更明智。用户想要一个响应式 UI，即使这意味着他们永远不会看到的数据的初始下载时间会增加几毫秒。

但是，如果您坚持单独加载数据，则可以使用 xmlhttprequest 加载数据的表示形式(例如 JSON 格式)，并使用 templating solution将结果输出到 info div 中。

可能生成数据 JSON 表示形式的页面可能如下所示:

<?php
    $result = array();


    // ... Code that defines type ... //



    $int = 0;
    foreach($types as $data){

        $result[] = array(
            "int"       => $int,
            "number"    => $data["number"],
            "item_name" => $data["item_name"],
            "amount"    => $data["amount"]
        );

        $int++;
    }

    echo json_encode($result);
?>

因此，当用户单击链接时，上述页面将加载到 xmlhttprequest 中。然后，您可以使用 JSON.parse(req.responseText) 解析结果，并将 HTML 模板应用于结果(查看上面的链接 plus this one ，了解有关如何执行此操作的更多信息)。

同样，您可能只需一次性加载所有数据就可以了。额外的 HTTP header 实际上会使页面需要更长的时间才能完全加载。