Disabling jQuery animations if user is on a lowend unit

Question

I'm developing an HTML5 app with jQuery Mobile, and I want to show sliding animations slideUp / slideDown only for units that are powerful enough for this.

I dont want people on lower end phones to get laggy animations, so I'd rather just turn animations off for them.

I'm sure there is someone who have thought about this before, and probably made some plugin or solution for this?

score 0 · Answer 1 · edited May 23 '17 at 10:25

Someone has thought of this before: How can I disable a jquery include for low bandwidth connections

In general it is a bad idea to assume the user has a low end device or has low bandwidth. The smarter idea is to put in toggle for the user to decide themselves.

This can be done using: jQuery.fx.off, http://api.jquery.com/jquery.fx.off/

Fiddle here: http://jsfiddle.net/dnLq49sm/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.fx.off demo</title>
  <style>
    div {
      width: 50px;
      height: 30px;
      margin: 5px;
      float: left;
      background: green;
    }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

  <input type="button" value="Run">
  <button>Toggle fx</button>
  <div></div>

  <script>
   var toggleFx = function() {
     $.fx.off = !$.fx.off;
    };
    toggleFx();
    $( "button" ).click( toggleFx );
    $( "input" ).click(function() {
        $( "div" ).toggle( "slow" );
    });
  </script>

</body>
</html>

Disabling jQuery animations if user is on a lowend unit

1 Answers1