隐藏css vs JS创建元素vs ajax

时间:2015-01-29 20:36:30

标签: javascript jquery html css ajax

如果照片不存在,我想隐藏一些显示照片标题的div和关于照片的其他细节(404),然后当用户点击页面ex中的另一张照片时再显示这些div。在related photos部分。 I have used css to hide this divs and then js to show them again.我考虑过使用css隐藏,使用JavaScript创建元素并使用ajax显示html。如果不使用非语义HTML,有没有更好的方法呢?

<?php 
        if(PHOTO::exists($_GET["photo"])) {
            ?>

        <div id="title_wrap">
            <div id="title"><?php echo $photo->get_title(); ?></div>
        </div>

        <div id="time_views">
            <div id="time"><?php echo $photo->get_time();?></div>
            <div id="views"><?php echo $photo->get_views(); ?></div>          
        </div>
         <?php
        }
?>

所以如果照片不存在,这些div(#title_wrap,#time_views)将不会显示,但是当用户点击相关部分中的照片时,需要显示这些div并使用通过AJAX加载的新信息进行更新。那么显示和隐藏这些div的最佳方式是什么?

1 个答案:

答案 0 :(得分:3)

如果您使用ajax拉入图像,则可以在创建新图像元素之前测试数据是否可用,然后跳过它。这样您就不会使用隐藏元素加载页面。添加到页面的每个元素都使用更多内存。如果您在页面中加载许多图像标记失败并且您只是隐藏它们,那么页面将变得很大,具体取决于此循环的大小。当您收到回复时,请检查数据,如果您获得404,请跳过它并转到下一个加载请求,不要将其添加到页面中。谷歌机器人也不喜欢404消息。因此,将错误的图片标记加载到您的网页中将无效或干净,谷歌将丢弃您的搜索引擎优化得分。

您应该考虑的另一件事是向服务器发送请求让服务器响应它所拥有的文件列表,这样您只需要发送加载请求服务器上的内容而不是猜测。

[UPDATE]

<?php if(file_exists($_GET["photo"])): ?>
     <div id="title_wrap">
         <div id="title"><?php echo $photo->get_title(); ?></div>
     </div>

     <div id="time_views">
         <div id="time"><?php echo $photo->get_time();?></div>
         <div id="views"><?php echo $photo->get_views(); ?></div>          
     </div>
<?php endif; ?>
<div id="relatedImages>this is outside the if statement and will be displayed even if the if statement is false</div>

如果file_exists()返回false,则不会显示任何内容。所以你不必用css隐藏它,因为它不会在页面上。如果没有要显示的数据,则显示div是没有意义的。解决方案不是css或JavaScript,如果文件不存在,你就不应该显示内容。

这部分代码也不是你的问题。问题是您为用户提供了选择不存在的图像的选项。如果你只给用户选择你有文件的图像,那么file_exists()每次都会返回true,你永远不需要处理404错误。

基于您的问题以及您对PHP的看法,我强烈建议您阅读一本关于PHP的书。您应该刷新运算符和if语句。一旦您查看了if语句的部分,请查看内联php语句的格式。这将使您在网络编程方面取得非常成功的职业发展。 (这本书的链接是我在搜索亚马逊时找到的第一本书)这将是一个好的开始。还可以查看http://www.w3schools.com/php/他们有一些初学者教程,可以帮助您。并记住KISS(Keep It Stupid Simple)。

http://www.amazon.com/PHP-Absolute-Beginners-Jason-Lengstorf/dp/1430268158/ref=sr_1_1?s=books&ie=UTF8&qid=1422575607&sr=1-1&keywords=php+absolute+beginner&pebp=1422575612138&peasin=1430268158