JQuery 获取屏幕大小和 php 生成图像¿好方法？答案

【问题标题】：JQuery gets sreen size and php generates the images ¿good way?JQuery 获取屏幕大小和 php 生成图像¿好方法？
【发布时间】：2012-11-19 19:54:57
【问题描述】：

我正在为用户开发一个统计面板，其中显示的图像是带宽使用统计（从 1 天开始，从 2 天开始，等等）。我打算只使用带有框架的 php，但我希望有一个更动态的设计，以便图像和设计可以适合用户屏幕尺寸，所以我尝试使用 JQuery 来询问用户分辨率然后生成使用 php 的确切图像。

Javascript 读取屏幕大小 (imgsize()) 并将值传递给 php 脚本 (stats_generatemain(tipo))。 php 脚本生成图像，然后 Javascript 重新加载图像 div 容器 (#mstats) 以显示新的 php 生成的图像。

这是一个好方法吗？你会换一种方式吗？

非常感谢。

<script>
  $(document).ready(function () {
    $.ajaxSetup({
      cache: false
    });

    function imgsize() {

      var myWidth = screen.availWidth;
      var myHeight = screen.availHeight;
      myRatio = myWidth / myHeight;
      myWidth = myWidth - 504;
      myHeight = myWidth / myRatio;

      var dim = new Array(2);
      dim[0] = myWidth;
      dim[1] = myHeight;
      return dim;
    }

    function mstats_resize_start() {
      var dim = imgsize();
      $('#mstats').width(dim[0]).height(430);
    }

    function stats_generatemain(tipo) { 
        if(tipo==''){tipo=1;}
        else{tipo=parseInt(tipo);}
        var dim = imgsize();
        $.ajax({ 
             url: 'stats_generatemain.php',
             type: 'get',
             data: {imsi: '214290000000003',tipo: tipo, w: dim[0], h: 430},
             beforeSend: function(){
                $("#mstats").hide();
                $('#mloading').show();
             },
             success: function(){
                var href = "./TEMP/trafico-214290000000003-main.jpg?" + Math.random();
                $("#mstats").attr("src", href);
             },
             complete: function(){
                $('#mloading').hide();
                $("#mstats").show();
             }
        });
    }

    stats_generatemain(1);

    $("a.link").live('click', function (e) {
      e.preventDefault();
      var tipo = this.href.split(/=/)[1];
      stats_generatemain(tipo);
    });

    $('li > a').click(function () {
      $('li').removeClass();
      $(this).parent().addClass('active');
    });


    jQuery.event.add(window, "load", mstats_resize_start);

  });
</script>

【问题讨论】：

我建议让它在服务器端响应：1. 让它渲染得更快，或者 2. 让调用是非阻塞的，带有缓存：第一个请求触发（背景）生成并返回将创建图像的 url。然后 JS 重复（大约 1 秒）请求生成的图像，直到它存在。额外请求的额外负载应该是最小的，因为它们是简单的文件获取请求。如果您将文件名设为输入的非随机哈希值，则可以加分，因此如果该（或其他）用户请求完全相同的内容，则不会重新生成。
您似乎让这变得非常复杂。这些图像是静态的还是动态的？如果静态使用缓存。如果是动态的，在需要刷新之前仍然使用缓存一段合理的时间。
它们是动态图像。您有一个菜单，其中包含指向每个图像的链接。每个图像都是特定用户的统计图像。每次用户单击菜单中的一项时，图像都会在 php 中生成，然后使用 JQuery 加载到页面中。在php中直接生成/显示图像不会花费太长时间，这是合理的。但是使用 JQuery 的响应真的很糟糕。
我打算只使用 php 和 iframe，直接加载每个 php，但最好知道用户屏幕尺寸以生成和显示符合其屏幕尺寸的图像，所以我最终使用了 JQuery .

标签： php jquery loading screen-size

【解决方案1】：

我想你可能想多了……为什么不直接使用响应式设计/流畅的图像呢？将类应用到使用以下 css 的图像：

max-width:100%;

高度将自动计算。

如果您想要一个不错的响应式设计框架，我建议您查看Twitter Bootstrap。如果您不太擅长设计事物，引导程序可以帮助您减轻大部分工作量，让您专注于编程方面。

【讨论】：

【解决方案2】：

JQuery 获取屏幕大小和 php 生成图像¿好方法吗？

从你的主题和标题我说这个答案：

.screenSize{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  visibility:hidden;
  display:none;
 }

这是你的 jquery 代码：

$(function(){
   var width=$(".screenSize").width();
   var height=$(".screenSize").height();
 })

用 php 做其他你想做的事，你可以用 ajax 发送你的数据并做一些事情

【讨论】：