4

So, I'm trying hard to speed up my page (by avoiding some requests) and wonder if anyone knows how to keep the following code working without having to load the whole JQuery library:

$("#div1").click(function () {
    $("#div2).hide();
    $("#div3").fadeIn();
})

Ofcourse this code needs a JQuery library to work, but it's heavier than my page itself.

Is there a way,somewhere, to just select the code needed from the library and insert it inline (in my html)?

Thank You,

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Larry
  • 49
  • 3
  • 2
    You _might_ be able to drop some jQuery code with tree shaking from a bundler like Rollup or Webpack 2. But if it's a real concern, drop jQuery and use vanilla DOM event handlers and CSS instead. – joews Oct 15 '16 at 18:53
  • 1
    you can use jquery cdn. – mukesh kudi Oct 15 '16 at 18:55
  • are u even sure that loading jquery is take longer than your page? i think u can do out link by taking reference from google for the jquery – Kasnady Oct 15 '16 at 18:55
  • @AKZhang you can reference google's jquery library instead of keeping a copy on your own site, but the client still has to load the entire jquery file when it encounters the reference. You don't want to be making round trips to the google site while you're trying to execute code. What the OP is saying is that the jquery.js file is heavier than his entire page, which is actually a common issue. – BobRodes Oct 15 '16 at 18:58
  • Have you considered just writing it in plain javascript instead? – adeneo Oct 15 '16 at 18:59
  • Yes even with the use of the Google CDN my page is slow down by 2s (the time to connect ) with webpagetest.org – Larry Oct 15 '16 at 19:00
  • 1
    2 seconds to load from a CDN? That seems very odd. – Rory McCrossan Oct 15 '16 at 19:02
  • go ahead with css transition for fadeIn you can find here http://stackoverflow.com/questions/20264115/css3-replacement-for-jquery-fadein-and-fadeout – Vicky Kumar Oct 15 '16 at 19:08

5 Answers5

2

CSS3 @keyframes is a clean way to do what you want without jQuery. Have a look at this thread, which has a demo. It actually runs smoother than jQuery's fadeIn.

Community
  • 1
  • 1
BobRodes
  • 5,990
  • 2
  • 24
  • 26
2

Here's an example using CSS for the fade and plain Javascript for triggering the changes:

document.getElementById('div1').onmousedown = function() {
  addClass('div2', 'hide');
  addClass('div3', 'show');
}

function addClass(id, className) {
  var el = document.getElementById(id);
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}
#div2.hide {
  display: none;
}

#div3 {
  opacity: 0;
  transition: 0.3s opacity ease;
}

#div3.show {
  opacity: 1;
}
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
1

If you aren't set on using jQuery you could just use normal JS, something along these lines:

document.getElementById('div1').onclick(function() {

  document.getElementById('div2').style.visibility = 'hidden';
  document.getElementById('div3').style.visibility = 'visible';

});

disclaimer there are better ways to do these DOM manipulations, this is an example!

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
1

The fadeIn function taken from here.

function fadeIn(el) {
    el.style.opacity = 0;
    var tick = function() {
        el.style.opacity = +el.style.opacity + 0.01;
        if (+el.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
        }
    };
    tick();
}
document.getElementById("div1").onmousedown = function () {
    document.getElementById("div2").style.display = 'none';
    fadeIn(document.getElementById("div3"));
};
Vlad Gincher
  • 1,052
  • 11
  • 20
  • 1
    Did you just animate a fade-in with JavaScript? I sure would go with a CSS3 transition instead (even though that's not tagged). – John Weisz Oct 15 '16 at 19:03
  • @JohnWhite Yeah, me too. – BobRodes Oct 15 '16 at 19:08
  • Well, the problem is because i use delay too! I don't think there is a way to delay with CSS? – Larry Oct 15 '16 at 19:09
  • @Larry [transition-delay](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay) – John Weisz Oct 15 '16 at 19:09
  • @JohnWhite But why not use JS? It'll work on IE9+, while CSS3 and the `transition-delay` won't... – Vlad Gincher Oct 15 '16 at 19:11
  • 2
    @VladGincher Because it is uncomparably slower for any serious application. A JS-driven transition will consume the main thread with calculations, while a CSS3 transition is GPU accelerated with performance that is magnitudes beyond the former. Also, I don't think it's worth going with inferior performance just to support non-core UI elements for a negligible amount of users with legacy browsers. – John Weisz Oct 15 '16 at 19:14
  • @JohnWhite I agree with you, except I'm not sure that there is now a "negligible amount of users" still using IE9. Not trying to be confrontational, just curious. Do you have evidence to back that up? – BobRodes Oct 15 '16 at 19:27
  • 1
    @BobRodes http://caniuse.com/#search=transition -- besides Opera Mini, this is around 1%. – John Weisz Oct 15 '16 at 19:30
  • @JohnWhite Nice resource! Thank you sir. – BobRodes Oct 15 '16 at 19:31
1

This only works on single selectors and not multiple elements at once, and it's not going to work for any other jQuery functions. For your situation it will allow a drop in replacement so you don't require an extra library.

$ = function(selector) {
    return document.querySelector(selector);
}
HTMLElement.prototype.hide = function() {
    this.style.visibility = "hidden";
    this.style.opacity = 0;
}
HTMLElement.prototype.fadeIn = function() {
    this.style.display = "block";
    this.style.visibility = "visible";
    this.style.opacity = 1;
}

For the fadeIn() animation you can add a CSS property to your element. This is set to 400ms just like jQuery's effect: transition: opacity .4s ease;

jaggedsoft
  • 3,858
  • 2
  • 33
  • 41