>

对响应性图片等比例缩放,Javascript图片预加载详

- 编辑:云顶娱乐yd2221 -

对响应性图片等比例缩放,Javascript图片预加载详

Javascript图片预加载详解

2016/07/04 · JavaScript · 1 评论 · 预加载

初稿出处: Perishable Press   译文出处:CSDN   

Perishable Press网址近日见报了一篇小说《3 Ways to Preload Images with CSS, JavaScript, or Ajax》,分享了采用CSS、JavaScript及Ajax实现图片预加载的三大办法。上面为译文。

预加载图片是加强客户体验的多少个很好方法。图片预先加载到浏览器中,访谈者便可顺遂地在你的网址上冲浪,并享受到相当慢的加载速度。这对图纸画廊及图片占领比一点都不小比重的网站来讲非常有益,它保证了图片十分的快、无缝地揭破,也可扶持顾客在浏览你网址内容时收获越来越好的客户体验。本文将享用四个例外的预加载才干,来增长网址的属性与可用性。

方法一:用CSS和JavaScript完结预加载

兑现预加载图片有广大方式,包罗运用CSS、JavaScript及二者的各样组合。那么些工夫可依据不一样规划场景设计出相应的缓解方案,十分连忙。

只是运用CSS,可轻巧、高效地预加载图片,代码如下:

CSS

#preload-01 { backgroundnull:url() no-repeat -9999px -9999px; } #preload-02 { backgroundnull:url() no-repeat -9999px -9999px; } #preload-03 { backgroundnull:url() no-repeat -9999px -9999px; }

1
2
3
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将那个ID接纳器应用到(X)HTML成分中,大家便可透过CSS的background属性将图纸预加载到显示器外的背景上。只要那些图片的门道保持不改变,当它们在Web页面包车型客车别样地点被调用时,浏览器就能够在渲染进程中动用预加载(缓存)的图片。轻松、高效,无需任何JavaScript。

该办法尽管高效,但仍有改良余地。使用该法加载的图片会同页面包车型客车其余剧情一同加载,扩充了页面包车型地铁完全加载时间。为了减轻这一个难点,大家扩张了部分JavaScript代码,来推迟预加载的大运,直到页面加载实现。代码如下:

JavaScript

// better image preloading @ <a href="; function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url() no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url() no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url() no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a>  
function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

在该脚本的第一部分,大家获得使用类采纳器的因素,并为其设置了background属性,以预加载不相同的图形。

该脚本的第二部分,大家利用addLoadEvent()函数来延缓preloader()函数的加载时间,直到页面加载完成。

设若JavaScript比十分的小概在客户的浏览器中健康运转,会发出哪些?相当粗略,图片不会被预加载,当页面调用图片时,符合规律展现就可以。

方法二:仅使用JavaScript完毕预加载

上述格局有的时候真的异常高效,但大家慢慢察觉它在其实贯彻进度中会费用太多日子。相反,作者更欣赏使用纯JavaScript来促成图片的预加载。上边将提供三种那样的预加载方法,它们得以相当漂亮观地职业于全体今世浏览器之上。

JavaScript代码段1

只需轻松编辑、加载所需求图片的路径与名称就可以,很轻松实现:

JavaScript

<div class="hidden"> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i]对响应性图片等比例缩放,Javascript图片预加载详解。 } } preload( "", "", "" ) //--><!]]> </script> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
        //--><!]]>  
    </script>  
</div>

该办法尤其适用预加载多量的图片。笔者的画廊网址采纳该手艺,预加载图片数量达50多张。将该脚本金和利息用到登录页面,只要客户输入登入帐号,超越一半画廊图片将被预加载。

JavaScript代码段2

该办法与地点的法子类似,也得以预加载任性数量的图片。将下边包车型客车本子添参预此外Web页中,依据程序指令举行编辑就可以。

JavaScript

<div class="hidden"> <script type="text/javascript"> <!--//--><![CDATA[//><!-- if (document.images) { img1 = new Image(); img2 = new Image(); img3 = new Image(); img1.src = ""; img2.src = ""; img3.src = ""; } //--><!]]> </script> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="hidden">  
    <script type="text/javascript">  
        <!--//--><![CDATA[//><!--  
            if (document.images) {  
                img1 = new Image();  
                img2 = new Image();  
                img3 = new Image();  
                img1.src = "http://domain.tld/path/to/image-001.gif";  
                img2.src = "http://domain.tld/path/to/image-002.gif";  
                img3.src = "http://domain.tld/path/to/image-003.gif";  
            }  
        //--><!]]>  
    </script>  
</div>

正如所看到,每加载二个图纸都急需创建二个变量,如“img1 = new Image();”,及图片源地址注解,如“img3.src = “../path/to/image-003.gif”;”。仿照效法该情势,你可依赖必要加载肆意多的图样。

大家又对该办法开展了革新。将该脚本封装入一个函数中,并利用 addLoadEvent(),延迟预加载时间,直到页面加载完成。

JavaScript

function preloader() { if (document.images) { var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); img1.src = ""; img2.src = ""; img3.src = ""; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function preloader() {  
    if (document.images) {  
        var img1 = new Image();  
        var img2 = new Image();  
        var img3 = new Image();  
        img1.src = "http://domain.tld/path/to/image-001.gif";  
        img2.src = "http://domain.tld/path/to/image-002.gif";  
        img3.src = "http://domain.tld/path/to/image-003.gif";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

方法三:使用Ajax完成预加载

地点所付出的主意就像远远不足酷,那现在来看一个行使Ajax完结图片预加载的议程。该办法运用DOM,不唯有预加载图片,还可能会预加载CSS、JavaScript等连锁的事物。使用Ajax,比平素运用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到近日页面。该办法轻易、高效。

JavaScript

window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', ''); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', ''); xhr.send(''); // preload image new Image().src = ""; }, 1000); };

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

上边代码预加载了“preload.js”、“preload.css”和“preload.png”。一千皮秒的超时是为了幸免脚本挂起,而导致健康页面现身功能难题。

下边,大家看看怎么样用JavaScript来兑现该加载进度:

JavaScript

window.onload = function() { setTimeout(function() { // reference to <head> var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = ""; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = ""; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = ""; }, 1000); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function() {  
  
    setTimeout(function() {  
  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.href = "http://domain.tld/preload.css";  
  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
  
    }, 1000);  
  
};

这里,我们经过DOM创制多少个因从来兑现八个文本的预加载。正如上边提到的那么,使用Ajax,加载文件不会动用到加载页面上。从那点上看,Ajax方法优越于JavaScript。

假设您还会有怎样好的图样预加载方法,及对上述措施的修正提出,款待在评价中享用。(编写翻译:陈秋歌 审阅核查:夏梦竹)

原稿链接:3 Ways to Preload Images with CSS, JavaScript, or Ajax

1 赞 9 收藏 1 评论

图片 1

JavaScript 的援引与理念引用的区分

要商讨那么些标题,我们首先要询问 JavaScript 的援引于另外语言中的一个组别,在 C++ 中引用能够直接修改外部的值:

#include using namespace std; void test(int &p) // 引用传递 { p = 2048; } int main() { int a = 1024; int &p = a; // 设置援用p指向a test(p); // 调用函数 cout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#include
 
using namespace std;
 
void test(int &p) // 引用传递
{
    p = 2048;
}
 
int main()
{
    int a = 1024;
    int &p = a; // 设置引用p指向a
 
    test(p); // 调用函数
 
    cout

而在 JavaScript 中:

var obj = { name: 'Alan' }; function test1(obj) { obj = { hello: 'world' }; // 试图修改外界obj } test1(obj); console.log(obj); // { name: 'Alan' } // 并不曾退换① function test2(obj) { obj.name = 'world'; // 依据该指标修改其上的属性 } test2(obj); console.log(obj); // { name: 'world' } // 修改成功②

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = { name: 'Alan' };
 
function test1(obj) {
  obj = { hello: 'world' }; // 试图修改外部obj
}
 
test1(obj);
console.log(obj); // { name: 'Alan' } // 并没有修改①
 
function test2(obj) {
  obj.name = 'world'; // 根据该对象修改其上的属性
}
 
test2(obj);
console.log(obj); // { name: 'world' } // 修改成功②

大家发掘与 C++ 分歧,依照上面代码 ① 可以见到 JavaScript 中并未传递叁个援用,而是拷贝了一个新的变量,即值传递。根据 ② 可见拷贝的这些变量是三个能够访问到对象属性的“援用”(与价值观的 C++ 的援引差异,下文中涉嫌的 JavaScript 的援引都以这种特别的引用)。这里必要总计贰个绕口的结论:Javascript 中均是值传递,对象在传递的进度中是拷贝了一份新的引用。

为了知道这一个相比刚烈的定论,让我们来看一段代码:

var obj = { data: {} }; // data 指向 obj.data var data = obj.data; console.log(data === obj.data); // true-->data所操作的正是obj.data data.name = 'Alan'; data.test = function () { console.log('hi') }; // 通过data能够直接修改到data的值 console.log(obj) // { data: { name: 'Alan', test: [Function] } } data = { name: '鲍勃', add: function (a, b) { return a + b; } }; // data是一个援引,直接赋值给它,只是让这几个变量等于另外叁个援引,并不会修改到obj自个儿console.log(data); // { name: '鲍伯', add: [Function] } console.log(obj); // { data: { name: 'Alan', test: [Function] } } obj.data = { name: 'Bob', add: function (a, b) { return a + b; } }; // 而透过obj.data本事真的修改到data自个儿 console.log(obj); // { data: { name: '鲍伯', add: [Function] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var obj = {
  data: {}
};
 
// data 指向 obj.data
var data = obj.data;
 
console.log(data === obj.data); // true-->data所操作的就是obj.data
 
data.name = 'Alan';
data.test = function () {
  console.log('hi')
};
 
// 通过data可以直接修改到data的值
console.log(obj) // { data: { name: 'Alan', test: [Function] } }
 
data = {
  name: 'Bob',
  add: function (a, b) {
    return a + b;
  }
};
 
// data是一个引用,直接赋值给它,只是让这个变量等于另外一个引用,并不会修改到obj本身
console.log(data); // { name: 'Bob', add: [Function] }
console.log(obj); // { data: { name: 'Alan', test: [Function] } }
 
obj.data = {
  name: 'Bob',
  add: function (a, b) {
    return a + b;
  }
};
 
// 而通过obj.data才能真正修改到data本身
console.log(obj); // { data: { name: 'Bob', add: [Function] } }

通过那些事例大家可以看看,data 即便像四个援用同样指向了 obj.data,何况通过 data 能够访谈到 obj.data 上的质量。不过出于 JavaScript 值传递的特点直接修改 data = xxx 并不会使得 obj.data = xxx。

打个要是最早安装 var data = obj.data 的时候,内部存储器中的景况大借使:

| Addr | 内容 | |----------|-------- | obj.data | 内存1 | | data | 内存1 |

1
2
3
4
|   Addr   |  内容  |
|----------|--------
| obj.data |  内存1 |
|   data   |  内存1 |

因此通过 data.xx 能够修改 obj.data 的内部存款和储蓄器1。

下一场设置 data = xxx,由于 data 是拷贝的二个新的值,只是那么些值是三个援引(指向内部存款和储蓄器1)罢了。让它十二分另外贰个指标就好比:

| Addr | 内容 | |----------|-------- | obj.data | 内存1 | | data | 内存2 |

1
2
3
4
|   Addr   |  内容  |
|----------|--------
| obj.data |  内存1 |
|   data   |  内存2 |

让 data 指向了新的一块内部存款和储蓄器2。

如假若理念的引用(如上文中涉及的 C++ 的援用),那么 obj.data 自己会造成新的内部存款和储蓄器2,但 JavaScript 中均是值传递,对象在传递的经过中拷贝了一份新的援用。所以那么些新拷贝的变量被改成并不影响原来的靶子。

接头CSS3中的background-size(对响应性图片等比例缩放)

2016/03/10 · CSS · background-size

原来的小讲出处: 涂根华   

background-size的主导属性

background-size: 能够设定背景图像的尺码,该属性是css3中的,在运动端选取的地点重重,举个例子最广大的地方在做响应性布局的时候,举个例子后边做的品种中有轮播图片,为了自适应不一致尺寸分辨率的图形,小编门供给动用css3中的媒体询问来针对差异的分辨率设置宽度和可观,尽管这种格局是能够消除难点,然而消除情势实际不是太好,并且很麻烦,当然笔者门也想过直接运用比例设置图片的大小,比方width(宽度): 百分之百,height(高度):百分之百; 不过设置图片等惊人100%的时候并不奏效,图片并未有展现出来,因为未有安装具体的莫大值,浏览器渲染的时候并不曾中度,因而当时消除的方法是应用css3中的媒体询问真对分化的分辨率等比例缩放分化的height(高度);后菲律宾人门再一次来读书下background-size 那些具体的属性值,而且采用新的主意来消除针对响应性布局的背景图片自适应。

浏览器扶助的品位:IE9+, Firefox4+, opera, chrome, safari5+;

主干语法:background-size: length | percentage | cover | contain; 

一:length

    该属性值是设置背景图像的幅度和可观的,第多个值是小幅度,第4个值是设置中度的。假使只设置第一个值,那么第三个值会自动转变为 “auto”;

二:percentage

     该属性是以父成分的百分比来设置图片的宽度和可观的,第叁个值是大幅,第一个值是可观。假若只设置二个值,那么第一个值会被设置为 “auto”;

三:cover

      把背景图像增加至丰裕大,以使背景图像完全覆盖背景区域。

四:contain

      把图像扩大至最大尺寸,以使宽度和中度 完全适应内容区域。

给图片设置一定的小幅和中度的

上边我门来做一些demo来达成下方面包车型客车多少个属性值的中央使用方法;

主旨的原图的html代码如下:

<h3>原图</h3> <div class="images"><img src="" width="100%"/></div>

1
2
<h3>原图</h3>
<div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

职能如下图所示:

图片 2

给图片设置一定的增长幅度和冲天的代码如下:

举例说设置 固定宽度400px和冲天200px后的图纸;

HTML代码如下:

<h3>固定宽度400px和高度200px后的图样</h3> <div class="bsize1"></div>

1
2
<h3>固定宽度400px和高度200px后的图片</h3>
<div class="bsize1"></div>

css代码如下:

.bsize1 { width:400px; height:200px; backgroundnull:url("") no-repeat; border:1px solid red; overflow: hidden; }

1
2
3
4
5
6
7
.bsize1 {
     width:400px;
     height:200px;
     background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
     border:1px solid red;
     overflow: hidden;
  }

意义如下:

图片 3

永远宽度400px和中度200px-使用background-size:400px 200px缩放设置

  1. 原则性宽度400px和中度200px-使用background-size:400px 200px缩放设置;

HTML代码如下:

<h3>固定宽度400px和冲天200px-使用background-size:400px 200px缩放设置<h3> <div class="bsize1 bsize2"><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px 200px缩放设置<h3>
<div class="bsize1 bsize2"><div>

css代码如下:

.bsize2 { background-size: 400px 200px; }

1
2
3
.bsize2 {
         background-size: 400px 200px;
  }

效果与利益如下:

图片 4

固定宽度400px和冲天200px-使用background-size:400px;的缩放设置

3. 恒定宽度400px和冲天200px-使用background-size:400px;的缩放设置,那么第三个参数会自动转变为auto;

HTML代码如下:

<h3>固定宽度400px和可观200px-使用background-size:400px;的缩放设置<h3> <div class="bsize1 bsize3"><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px;的缩放设置<h3>
<div class="bsize1 bsize3"><div>

css代码如下:

.bsize3 { background-size: 400px; }

1
2
3
.bsize3 {
         background-size: 400px;
}

效果与利益如下:

图片 5

固定宽度400px和可观200px-使用background-size:百分之百 百分之百的缩放设置

  1. 一定宽度400px和可观200px-使用background-size:百分之百 百分百的缩放设置

HTML代码如下:

<h3>固定宽度400px和中度200px-使用background-size:百分之百百分之百的缩放设置<h3> <div class="bsize1 bsize4"><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置<h3>
<div class="bsize1 bsize4"><div>

css代码如下:

.bsize4 { background-size:100% 100%; }

1
2
3
.bsize4 {
        background-size:100% 100%;
  }

效果如下:

图片 6

确定地点宽度400px和高度200px-使用background-size:百分之百的缩放设置

  1. 恒定宽度400px和中度200px-使用background-size:百分百的缩放设置。

HTML代码如下:

<h3>固定宽度400px和可观200px-使用background-size:100%的缩放设置<h3> <div class="bsize1 bsize5"><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100%的缩放设置<h3>
<div class="bsize1 bsize5"><div>

css代码如下:

.bsize5 { background-size: 100%; }

1
2
3
.bsize5 {
         background-size: 100%;
  }

如下所示:

图片 7

利用性质cover来设置背景图片

  1. 运用性质cover来设置背景图片。

HTML代码如下:

<h3>使用质量cover来设置背景图片<h3> <div class="bsize1 cover"><div>

1
2
<h3>使用属性cover来设置背景图片<h3>
<div class="bsize1 cover"><div>

css代码如下:

.cover { background-size:cover; }

1
2
3
.cover {
        background-size:cover;
}

效果与利益如下:

图片 8

选拔性质contain来安装背景图片

  1. 利用性质contain来安装背景图片。

HTML代码如下:

<h3>使用性能contain来设置背景图片<h3> <div class="bsize1 contain"><div>

1
2
<h3>使用属性contain来设置背景图片<h3>
<div class="bsize1 contain"><div>

css代码如下:

.contain { background-size:contain; }

1
2
3
.contain {
        background-size:contain;
  }

效率如下:

图片 9

给图片设置width属性百分之百;中度自适应

8.  下边小编门使用图片来做,不行使背景图片等情事下,给图片设置属性 width = 百分百的话,它的万丈会自适应的。如下HTML代码:

<h3>给图片设置属性宽度为100%的情景下,可自适应图片<h3> <div class="bsize-padding"><img src="" width="100%"/><div>

1
2
<h3>给图片设置属性宽度为100%的情况下,可自适应图片<h3>
<div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/><div>

效能如下:

图片 10

动用另一种艺术来化解图片自适应的难点--图片自适应难点

9. 选取另一种方法来化解图片自适应的标题--图片自适应难点,图片宽度设置百分百,页面加载时会存在中度塌陷的主题材料,能够选择padding-top来设置百分比率来促成自适应 padding-top = (图片的惊人/图片的宽度)*100;

如下HTML代码:

<h3>图片自适应难题,图片宽度设置百分百,页面加载时会存在中度塌陷的主题素材</h3> <p>能够使用padding-top来安装百分比率来落到实处自适应 padding-top = (图片的万丈/图片的小幅度)*100</p> <div class="cover-paddingTop"> <img src="; </div>

1
2
3
4
5
<h3>图片自适应问题,图片宽度设置100%,页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/>
</div>

css代码如下:

.cover-paddingTop { position: relative; padding-top: 50%; overflow: hidden; } .cover-paddingTop img{ width:100%; position: absolute; top:0; }

1
2
3
4
5
6
7
8
9
10
.cover-paddingTop {
       position: relative;
       padding-top: 50%;
       overflow: hidden;
  }
.cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

职能如下:

图片 11

选择padding-top:(percentage)完毕响应式背景图片

  1. 利用padding-top:(percentage)实现响应式背景图片

本人门都掌握,管理在响应性布局的时候,背景图片都是等比例缩放,举例上边的采纳图片的处境,使用 引进的图形的话,那么设置她们的width属性为百分之百;图片 12 的话,中度就能够等比例缩放,那是图片,可是倘诺是背景图片呢?笔者门在此之前的项目中的常见的做法是基于css3媒体询问的法子来做的,依据差别手提式有线电话机的分辨率等不等,来等比例缩放背景图的惊人,就算这种办法是能够消除难题的,不过这种经过人肉的主意来张开安装并不佳,也很麻烦,明天笔者门来学学生运动用padding-top这么三个性能来安装了;

落实的基本原理:将应用到保险元素的宽高比的本事,为成分增添垂直方向的padding-top的值,使用比例的款型,那个值是相对于成分的宽而定的,举个例子本人上边的一张图纸的宽窄是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )* 100% = (316 / 1024)* 100% =  30.85%;

唯独单纯对图片中度和幅度缩放的放还远远不足,笔者门还非得加多background-size:cover, 使那个个性让背景铺满元素的,不过IE8及以下不扶持该属性,由此为了包容IE下边的浏览器,作者门还索要再加叁特品质background-position: center ; 同期小编门也要保管 图片的小幅最大等于父容器的急剧;由此下边包车型大巴HTML代码如下:

<h3>使用padding-top完毕响应性图片(图片的肥瘦是1024px,中度是316px)</h3> <div class="column"> <div class="figure"></div> </div>

1
2
3
4
<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
<div class="column">
       <div class="figure"></div>
  </div>

css代码如下:

.column{ max-width: 1024px; } .figure { padding-top:30.85%; /* 316 / 1024 */ backgroundnull:url("") no-repeat; background-size:cover; background-position:center; }

1
2
3
4
5
6
7
8
9
.column{
        max-width: 1024px;
}
.figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

意义如下:

图片 13

在意:具体的成效能够团结复制代码到浏览器运转下就能够~

1 赞 4 收藏 评论

图片 14

2. demo说明

本文开篇给出的魔法,对应的页面是index.html,关于这一个意义还大概有八个难点亟待注解:

1)它用了从前那篇博客行使轮播原理结合hammer.js达成简洁的滑屏成效介绍的滑屏思路,并把它的片段逻辑包装在了swipe.js,对外提供了二个全局变量Swipe,那些模块有叁个init的办法,以便外界通过调用Swipe.init()就能够初阶化滑屏相关的机能,原来未有提供这些init方法,在js加载完结就能够起头化滑屏效能,有了这些init方法就足以把滑屏的逻辑延迟到加载达成的时候去初叶化。index.html一共引用了5个js:

<script src="js/zepto.js"></script> <script src="js/transition.js"></script> <script src="js/hammer.js"></script> <script src="js/imgLoader.js"></script> <script src="js/swipe.js"></script>

1
2
3
4
5
<script src="js/zepto.js"></script>
<script src="js/transition.js"></script>
<script src="js/hammer.js"></script>
<script src="js/imgLoader.js"></script>
<script src="js/swipe.js"></script>

其间imgLoader.js便是眼下介绍图片加载器的完结,前四个js都是为尾声多个swipe.js服务的,感兴趣的可以持续自个儿的博客行使轮播原理结合hammer.js实现简洁的滑屏作用打听相关内容。不过滑屏不是本文的首要,不领会swipe.js不会影响精晓本文的剧情~

2)尽管本身在demo中用到了3张十分的大的图形,不过出于在地头情形,加载速度依旧非常的慢,所以一最早的时候,很可耻到预加载的效应,最终不得不想办法在种种进程回调此前做一下延缓,那技能够看见前面gif图片一伊始的十二分loading效果,达成格局是:

//模拟加载慢的效率 var callbacks = []; imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) { var i = callbacks.length; callbacks.push(function(){ setTimeout(function(){ var percentT = percentage * 100; $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%'); $('#loader__progress')[0].style.width = percentT + '%'; if (percentage == 1) { setTimeout(function(){ $('#loader').remove(); Swipe.init(); }, 600); } callbacks[i + 1] & callbacks[i + 1](); },600); }); if(percentage == 1) { callbacks[0](); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//模拟加载慢的效果
var callbacks = [];
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {
    var i = callbacks.length;
    callbacks.push(function(){
        setTimeout(function(){
            var percentT = percentage * 100;
            $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');
            $('#loader__progress')[0].style.width = percentT + '%';
            if (percentage == 1) {
                setTimeout(function(){
                    $('#loader').remove();
                    Swipe.init();
                }, 600);
            }
            callbacks[i + 1] & callbacks[i + 1]();
        },600);
    });
 
    if(percentage == 1) {
        callbacks[0]();
    }
});

在真正意况,最棒照旧不要特意去加这种延迟,没须要为了让顾客观望一个难堪有意思的加载效果,就浪费它不供给的守候时间,所以实际情况依然应该用上面包车型地铁代码:

imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) { var percentT = percentage * 100; $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%'); $('#loader__progress')[0].style.width = percentT + '%'; if (percentage == 1) { $('#loader').remove(); Swipe.init(); } });

1
2
3
4
5
6
7
8
9
imgLoader(['img/page1.jpg', 'img/page2.jpg', 'img/page3.jpg'], function (percentage) {
    var percentT = percentage * 100;
    $('#loader__info').html('Loading ' + (parseInt(percentT)) + '%');
    $('#loader__progress')[0].style.width = percentT + '%';
    if (percentage == 1) {
        $('#loader').remove();
        Swipe.init();
    }
});

css属性的取舍对动画片质量的震慑

2016/03/06 · CSS · 1 评论 · 动画

原稿出处: 马蜂窝设计划委员会员会   

现行反革命手提式有线电话机的占比进一步高,各个炫丽页面不可胜举,这几个特效都离不开css动画。说起css动画,主流的状态也就可是这两大类:位移和形变。而笔者辈在写二个动画特效的进程中,怎么样去提高它的习性呢?当然首先大家必要去精通一下骨干的定义,举个例子浏览器渲染的行事规律等,那一个小编也在读了三个人大咖写的相关小说后才有了必然的问询,那边作者也不细说了,有意思味的同室能够去打听一下。这次的目标大约严酷地讲,其实就是我们相应运用什么css属性去实行动画的绘图时,能够使得的增高浏览器在渲染和制图进程中的品质。

飞速步入正题,我们先来看个demo。小编分别选拔了left和transform在2秒内向右平移了500px的移位。代码如下:

<style> .box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;} .box-ps{-webkit-animation:box-ps 2s linear;} .box-tf{-webkit-animation:box-tf 2s linear;} @-webkit-keyframes box-ps{ 0%{ left:0; }100%{ left:500px; } } @-webkit-keyframes box-tf{ 0%{ -webkit-transform:translate(0,0); }100%{ -webkit-transform:translate(500px,0); } } </style> <body> <div class="box-ps"></div> <div class="box-tf"></div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
.box-ps,.box-tf{position:absolute;top:0;left:0;width:100px;height:100px;background-color:red;}
.box-ps{-webkit-animation:box-ps 2s linear;}
.box-tf{-webkit-animation:box-tf 2s linear;}
 
@-webkit-keyframes box-ps{
0%{
left:0;
}100%{
left:500px;
}
}
 
@-webkit-keyframes box-tf{
0%{
-webkit-transform:translate(0,0);
}100%{
-webkit-transform:translate(500px,0);
}
}
</style>
 
<body>
<div class="box-ps"></div>
<div class="box-tf"></div>
</body>

接下来在chrome下获得了之类的结果,第一张为运用left的截图,第二张为使用transform的截图:

图片 15

图片 16

显明,大家在帧情势这里能够看出left比transform帧数要低,何况在渲染和制图那边的耗时,left要远远的压倒transform。见到此间,相信大家心中早就有结论了。
咱们再使用chrome的show paint rectangles来观看一下四头在动画进度中,渲染和制图的区域有啥差异,第一张为运用left的截图,第二张为使用transform的截图:

图片 17

图片 18

我们能够见到,使用left写的总体动画进程中,浏览器平素在开展绘图管理。而相对来说,使用transform时,仅仅是在动画初始和得了是扩充了绘图。因而,对于动画的品质上,transform要更为非凡。至于原因,这里将在引入多个接触重新布局的定义:

作者们在改造部分品质时,假诺是跟layout相关的属性,则会接触重新布局,导致渲染和制图所急需的时光将会越来越长。因而,大家在写动画的时候因该规避那么些属性:width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不会出发重新布局的个性有:transform(当中的translate, rotate, scale), color, background等。

进而,大家从来在写css动画时,应该事先采用不触发重新布局的属性,那样能够使大家所展现动画效果的更是通畅。

 

2 赞 3 收藏 1 评论

图片 19

本文由云顶娱乐发布,转载请注明来源:对响应性图片等比例缩放,Javascript图片预加载详