Tag Archives: HTML5

Delay loading images with HTML5 data- Attributes

html5-logo

| View Code on JS Bin |

Purpose

Intro animations (e.g., my Pure CSS3 Sliding Title) can appear jerky on pages loading a large amount of external data. If numerous images or Iframes immediately compete for resources, they initially can can bog down the page. Fortunately, you can delay the loading of those resources with a special combination of pure JavaScript, jQuery.data() (jQuery 1.4+) and the HTML5 custom data attributes. This solution requires no AJAX.

Code

HTML and jQuery Library:

< !DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />
    <title>Pure CSS3 Sliding Title</title>
</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>

JavaScript:

$(document).ready(function () {
      setTimeout(function () {
        $('.load-delay').each(function () {
            var imagex = $(this);
            var imgOriginal = imagex.data('original');
            $(imagex).attr('src', imgOriginal);
        });
    }, 3000);
});

Explanation

Read the rest
Posted in HTML5, jQuery, Web Design | Also tagged , , , , , | Comments closed

Pure CSS3 Sliding Title

CSS3 Logo

| View Code on JS Bin |

What it Does

This professional sliding title uses only CSS3 and HTML. CSS3 animation moves the title from left to right, while CSS3 -linear-gradient properties create a partially transparent css3color gradient. The slider floats over other contents (paragraphs, headers, divs, etc.) if they have a z-index of less than 1000.

How to install It

Read the rest
Posted in CSS3, Sean's Posts, Web Design | Also tagged , , , | Comments closed
  • Currently Reading:

  •   
  •