Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For 3.7.0 #130

Merged
merged 1 commit into from Mar 7, 2024
Merged

For 3.7.0 #130

merged 1 commit into from Mar 7, 2024

Conversation

shinsenter
Copy link
Owner

With this release, you can now add more attributes to the tags generated by the Defer.css or Defer.js methods.

For example:

This will load the animate.css library lazily.

<script>
  var origin = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1';

  Defer.css(origin + '/animate.min.css', {media: 'screen'}, 0, function () {
    console.info('Animate.css is loaded.'); // debug

    // adds animation classes to demo blocks.
    Defer.dom('.demo', 100, 'animate__animated animate__fadeIn');
  });
</script>

By adding {media: 'screen'}, the animate.css library will only load when the page is displayed on a screen-based device. The generated tag will look like:

<link media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

@shinsenter shinsenter merged commit a0e1c0a into main Mar 7, 2024
@shinsenter shinsenter deleted the develop branch March 7, 2024 04:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant