jQuery图片延迟加载插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片延迟加载插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>jQuery图片延迟加载插件 </title>
    <style>

    body {
        background: #FFF;
        color: #555;
        font-family: "Helvetica Neue", sans-serif;
        font-weight: 300;
        line-height: 1.7;
        padding: 30px 30px 300px 30px;
        margin: 0 auto;
        max-width: 480px;
    }
    header {
        margin: 100px 0;
    }
    header p {
        color: #CCC;
        margin: 0 0 25px 0;
    }
    header h1 {
        color: #000;
        font-size: 75px;
        line-height: 1;
        margin: 0 0 10px 0;
    }
    header h1 small{
        font-size: 16px;
    }
    h2 {
        color: #333;
        margin-top: 100px;
        font-size: 1em;
    }
    p {
        margin: 15px auto;
    }
    a {
        color: #3595b5;
    }
    strong {
        font-size: 1.5em;
        color: #CCC;
    }
    code {
    }
    code > span.red {
        color: #D14;
    }
    code > span.blue {
        color: #099;
    }
    ul {
        list-style: none;
        padding: 0;
    }
    ul > li {
        margin-top: 50px;
        text-align: center;
    }
    ul > li > img {
        display: inline-block;
        max-width: 100%;
    }

    .twitter-share-button {
        margin-left: 20px;
    }

    </style>

    <script src="js/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/jquery.unveil.js"></script>

    <script>
    $(function() {
        $("li img").unveil(300);
    });
    </script>
</head>
    <body>
    <h2>Demo</h2>
    <ul>
        <li><img src="images/loader.gif" data-src="images/anti-bullying-tom-froese-wallpaper-800x500.jpg" data-src-retina="images/anti-bullying-tom-froese-wallpaper-1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/brock-davis-wallpaper-800x500.jpg" data-src-retina="images/brock-davis-wallpaper-1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/dark-igloo-wallpaper-800x500.jpg" data-src-retina="images/dark-igloo-wallpaper-800x500.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/dark-igloo-wallpaper-1-800x500.jpg" data-src-retina="images/dark-igloo-wallpaper-1-800x500.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/iceland-smojr-wallpaper-800x500.jpg" data-src-retina="images/iceland-smjor-wallpaper-1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/james-olstein-wallpaper-800x500.jpg" data-src-retina="images/james-olstein-wallpaper-1200x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/johanna-basford-wallpaper-800x500.jpg" data-src-retina="images/johanna-basford-wallpaper-1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/Jude_Landry_Wallpaper_800x500.jpg" data-src-retina="images/Jude_Landry_Wallpaper_1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/julieta-felix-wallpaper-800x500.jpg" data-src-retina="images/julieta-felix-wallpaper-1280x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/Timothy-J-Reynolds-wallpaper-800x500.jpg" data-src-retina="images/Timothy-J-Reynolds-wallpaper-1200x800.jpg" /></li>
        <li><img src="images/loader.gif" data-src="images/haik-avanian-wallpaper-800x500.jpg" data-src-retina="images/haik-avanian-wallpaper-1280x800.jpg" /></li>
    </ul>
    </body>
</html>

JS代码(jquery.unveil.js):

/** * jQuery Unveil * A very lightweight jQuery plugin to lazy load images * http://luis-almeida.github.com/unveil * * Licensed under the MIT license. * Copyright 2013 Luís Almeida * https://github.com/luis-almeida */
;
	(function($){
	$.fn.unveil = function(threshold){
	var $w = $(window),th = threshold || 0,retina = window.devicePixelRatio > 1,attrib = retina? "data-src-retina":"data-src",images = this,loaded,inview,source;
	this.one("unveil",function(){
	source = this.getAttribute(attrib);
	source = source || this.getAttribute("data-src");
	if (source) this.setAttribute("src",source);
}
);
	function unveil(){
	inview = images.filter(function(){
	var $e = $(this),wt = $w.scrollTop(),wb = wt + $w.height(),et = $e.offset().top,eb = et + $e.height();
	return eb >= wt - th && et <= wb + th;
}
);
	loaded = inview.trigger("unveil");
	images = images.not(loaded);
}
$w.scroll(unveil);
	$w.resize(unveil);
	unveil();
	return this;
}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)