JS+CSS实现图片预加载与背景图上中下切图

图片预加载

为什么使用图片预加载

为什么会考虑使用图片预加载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你。

它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很漂亮而且流畅，没有延迟。

下面整理常用的图片预加载：

1.使用纯的css进行图片预加载

body:after {
    content: "";
    display: block;
    position: absolute;
    background:
    url("../image/manage/help/01.png") no-repeat -10000px -1000px,
    url("../image/manage/help/02.png") no-repeat -10000px -1000px,
    url("../image/manage/help/03.png") no-repeat -10000px -1000px,
    url("../image/manage/help/04.png") no-repeat -10000px -1000px,
    url("../image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}

2.使用纯javascript进行图片预加载

(function(){
    var imgSrcArr = [
        'image/1.png',
        'image/2.png',
        'image/3.png',
        'image/4.png',
        'image/5.png',
        'image/6.png',
        'image/7.png'
    ];
    var imgWrap = [];
    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }
    setTimeout(function(){preloadImg(imgSrcArr)},5000)
}());

3.使用css+js方式进行图片预加载

css

.preload-img:after{
    content: "";
    display: block;
    position: absolute;
    background:
    url("../image/manage/help/01.png") no-repeat -10000px -1000px,
    url("../image/manage/help/02.png") no-repeat -10000px -1000px,
    url("../image/manage/help/03.png") no-repeat -10000px -1000px,
    url("../image/manage/help/04.png") no-repeat -10000px -1000px,
    url("../image/manage/help/05.png") no-repeat -10000px -1000px,
    width: 0;
    height: 0
}

js

/*
    比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类
*/
 $("#target").addClass("preload-img")

背景图上中下切图方案

工作中经常会遇到将背景图切为三个部分： 上部、中部、下部。

上部和下部：上部和下部使用容器的多背景图实现。

中部：使用绝对定位容器的方式解决。

html部分：

<section class="content-wrap">
     <div class="line-wrap">
     </div>
     <p>我是内容</p>
</section>

css部分：

.content-wrap{
    position: relative;
    background:url('/images/top-bg.png') left top no-repeat,
    url('/images/bottom-bg.png') left bottom no-repeat;
    background-size:100% auto;
    .line-wrap{
        position: absolute;left:0;top:4.8rem;bottom:2.73rem;z-index:-1;
        width:100%;
        background:url('/images/middle-bg.png') left top repeat-y;
        background-size:100% auto;
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript+CSS实现唯美蝴蝶动画

    JavaScript+CSS实现唯美蝴蝶动画

    目录 演示 技术栈 源码 对部分蝴蝶的设定 飞动的设置 对蝴蝶形体的设置 演示 技术栈 关于svg标签在svg中关于图形的复用,是通过标签defs来解决的. 举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素.结构都是一样的,只是颜色和位置的差别. 关于figure: <figure标签规定独立的流内容(图像.图表.照片.代码等等). <figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档流产生影响. 关于perspective-o

  • 使用JavaScript和CSS实现简单的字符计数器

    使用JavaScript和CSS实现简单的字符计数器

    目录 项目基本结构 1.字符计数器的基本结构 2.添加标题 3.使用 textarea 创建一个输入框 4.看字数结果的位置 5.激活字符计数 javascript 完整源码下载 在本文中,你将学习如何使用 JavaScript 创建字符计数器.计数的数字可以在小显示屏中看到.如果你需要,可以在那个输入框中设置一个限制. 下面我给出了一个预览,可以帮助你了解这个 javascript 字符计数是如何工作的.如果您只想要源代码,可以在文末获取. 在线演示地址 项目基本结构 目录结构如下: 1.字符

  • JavaScript+CSS实现模态框效果

    本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码,供大家参考,具体内容如下 发现的问题 1)鼠标按下后拖动的瞬间,光标会脱离模态盒子跑到外面2)鼠标弹起事件不起作用 解决的思路 首先是因为代码里有用到offsetLeft和offsetTop这两个属性,所以考虑是不是模态框的定位出现了问题 . 又:设置关闭标签设置了绝对定位,那么loginBox作为其父级元素我将其设置为相对定位. 各个类型定位的介绍: 1.静态定位: position: static 默认,也就是文档流定

  • JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧

    目录 正文 demo Experimental:  这是一个实验中的功能 正文 那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,觉得很神奇,于是决定一探究竟. 高端的效果,往往只需要采用最朴素的实现方式,忙碌了两个小时,陈师傅打开了F12,豁然开朗.一张图片+一个属性,直接搞定. demo 为了印证我的想法,我决定自己写一个demo <!DOCTYPE html> <html lang="en"> <head> <m

  • 如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能

    目录 一.效果展示 二.实现的大致原理 三.H5的布局 四.CSS样式 五.JS代码内容 六.完整代码 总结 一.效果展示 二.实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取点击出现样式的节点,在经过寻找元素,设置全取消,点击相应的节点出现的效果.这里获取节点方式,都是通过点击元素获取父元素,在获得子元素,同级获得兄弟元素,在获取兄弟元素的子元

  • js+css实现计算器功能

    本文实例为大家分享了js+css实现计算器功能的具体代码,供大家参考,具体内容如下 目前仅实现了最基础的运算功能 (因为是js的运算内核,有些小数点计算并不准确,懒得去做去小数点后几位的操作) 一.最终呈现的视图效果 二.思路 代码量有点多,没办法.一开始只是无聊随便写的,没有构思,越写到后面越冗杂,自己又不想重新推翻去写. 三.代码逻辑 <style>         * {             margin: 0;             padding: 0;         }  

  • 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • 利用CSS、JavaScript及Ajax实现图片预加载的方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

  • JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

  • JS图片预加载 JS实现图片预加载应用

    复制代码 代码如下: <!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=&qu

  • 利用CSS、JavaScript及Ajax实现高效的图片预加载

    方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background:

  • js图片预加载示例

    js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

  • JS实现图片预加载之无序预加载功能代码

    JS实现图片预加载之无序预加载功能代码

    图片预加载之无序预加载的效果图如下所示,如果大家感觉不错,请参考实现代码. 具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:0; padding:0; border:none; outline:0

  • JavaScript模仿Pinterest实现图片预加载功能

    JavaScript模仿Pinterest实现图片预加载功能

    前言 对于Pinterest网站,从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局.但是今天,给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节. 看看下面的截图: 大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果. 其中谷歌的图片搜索也用到了类似效果: 我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会

  • 理解Javascript图片预加载

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • 学习JavaScript图片预加载模块

    前言 在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画.这里用到的技术主要是图片预加载.图片预加载的原理并不难,当给一个Image对象设置src属性后,图片就开始加载.给Image对象指定事件要位于设置src属性之前. 涉及到的内容 1.需要预加载的图片并不仅仅只是一张,通常将所有图片的信息保存在一个数组或者对象中,为了加载所有的图片,需要遍历出

随机推荐