Category Archives: jQuery

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
Also posted in HTML5, Web Design | Tagged , , , , , , | Comments closed

Making a Webpage fade-in with jQuery (Cross-Browser Compatible)

jQuery logo

jQuery logoGoal

Using lessons from my jQuery class, I added a jQuery fade-in effect to my company’s homepage: It greets visitors with a white page quickly resolving into a site menu. This fade-in effect works on every browser version I tested, including the earlier, opacity-challenged versions of Internet Explorer (IE). It also gracefully degrades if the visitor has disabled JavaScript.

Challenge

Initial searches on Google and Stack Overflow presented a host of possible solutions, but not all combinations of them worked. Some suggested

Read the rest
Also posted in Sean's Posts, Web Design | Tagged , , , | Comments closed
  • Currently Reading:

  •   
  •