/**

    **将图片加载到内存中，在页面任何位置引用的时候，直接从缓存中读取，提升用户的体验，提高网站的流畅度。**

**/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>预加载图片</title>

<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>

<script type="text/javascript">

(function($) {

  var cache = [];

  $.preLoadImages = function() {

    var args_len = arguments.length;

    for (var i = args_len; i--;) {

      var cacheImage = document.createElement('img');

      cacheImage.src = arguments[i];

      cache.push(cacheImage);

    }

  }

})(jQuery)

$.preLoadImages('images/sample1.jpg','images/sample2.jpg','images/sample3.jpg');

</script>

</head>

<body>

</body>

</html>

jQuery进行图片预先加载的更多相关文章

  1. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  2. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  3. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  4. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  5. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  6. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  7. jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片，就显示默认的图片

    参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s    下面是没有 ...

  8. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

  9. jquery的图片异步加载

    <script src="jquery.js"></script> <script src="jquery.lazyload.js" ...

随机推荐

  1. collectionView布局原理及瀑布流布局方式--备用

    最近学习到了瀑布流的实现方法,瀑布流的实现方式有多种,这里应用collectionView来重写其UICollectionViewLayout进行布局是最为简单方便的.但再用其布局之前必须了解其布局原 ...

  2. CSS3 animation的steps方式过渡

    animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果 是连贯性的.除了ease,linear.cubic-bezier之类的过渡函数都会为其插入补间. 但有些效果不 ...

  3. Linux查看用户和组命令

    在Linux系统里,我们会经常用Linux查看用户的命令,在这里我们一些命令进行了总结,总共有7个,并做了详细的解释,以便让大家更深入的理解,接下来让我们一起来看看这些命令和具体应用. 一.Linux ...

  4. 上海CEC大收购（包括华大九天）

    紫光收购展讯.锐迪科后,上海开始通过扶植CEC培育新势力,CEC已经收购上海澜起,即将收购amlogic.Ominivision,还在与marvell眉来眼去,此外华大九天已经移植上海,加上之前的上海 ...

  5. 二层安全之MAC Flooding解析与解决方法

    一.了解MAC Flooding原理 1.1 如图所示,网络中有3个PC和一个交换机,在正常情况下,如果PC A向PC B发送信息,PC C是不会知道的,过程都通过中间的交换机进行透明的处理,并且会记 ...

  6. mybatis UpdateByExampleMapper UpdateByExampleSelectiveMapper

    /** * 通用Mapper接口,Example查询 * * @param <T> 不能为空 * @author liuzh */ public interface UpdateByExa ...

  7. Hadoop MapReduce 二次排序原理及其应用

    关于二次排序主要涉及到这么几个东西: 在0.20.0 以前使用的是 setPartitionerClass setOutputkeyComparatorClass setOutputValueGrou ...

  8. 阿里云数加平台——BI报表使用概述和总结

    先声明一点,本人写此文章初衷只为对前段时间的工作做些总结,并做个记录,以备日后查用,此外也顺便与他人分享一下.当然间接上也为阿里云的大数据平台做了个免费广告.以下开始正文. 首先进入数加服务的控制面板 ...

  9. 轻松搭建自己的Linux发行版本

    许多人想要搭建自己的Linux发行版本,可能是觉得有趣,也可能是为了学习更多的Linux知识,或者因为他们有很正式的问题要解决.但是秘密是:自己搭建完美的发行版本不是很困难的一件事.事实上,我们收集了 ...

  10. 【转】Optiplex 7010驱动下载链接（XP&Windows7

    原文网址:http://zh.community.dell.com/support_forums/desktops/f/236/t/2606 x 7010驱动下载链接(XP&Windows7) ...