前端开发如何实现图片预加载

页面前端开发与设计的区别|.net前端开发面试题目|web前端开发需要多久?

1 , 如何实现图片的预加载?请写下你的实现方法。

如果使用jquery的话,jquery有个插件叫:lazyload.js 。它是基于jquery封装的针对图片懒加载的js库。 它的实现原理是使用延时加载。当图片出现在距离可视区多少距离的时候去加载图片。

实现方法:在img上添加data-original属性来存放url.在img添加hegiht和width,或者css添加也行。 保证加载图片以后不会影响页面结构。

<img class=”img” data-original=”img/a.png” height=”500″ width=”300″>

jquery方法:

$(‘.img’).layload({
    threshold: 200
})

threshold:200表示距离可视区200px的时候加载这张图片。更多API:https://www.cnblogs.com/fanmiao/p/6002907.html

使用js的话,可以利用new Image()对象。在页面加载的时候先给图片加载一张模糊图片进行占位,不至于页面加载大图的时候一片空白,然后利用new Image()的load事件,图片加载完成的时候去替换。
使用方法:

var img = document.getElementsByTagName(‘img’),
    imgUrl = [];
for (var i = 0; i < img.length; i++) {
    var oImg = new Image();
    oImg.src = img[i].data – url;
    oImg.onload = function () {
        img[i].src = img[i].data – url;
        oImg.onload = null;
    }
}

在加载图片完成以后 oImg.onload = null; 是为了放在IE浏览器内存泄漏,以及gif图片多次触发onload事件

使用css方法,可以在css里面把需要加载的图片写在背景里面。这样有个缺点就是网页会一次性加载很多背景图片导致刚打开页面的时候是一片空白。所以可以利用js来解决

window.onload = function () {
    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”;
}

使用ajax。原理和使用js原理一样。

前端开发没有经验也可以面试|前端开发需要做的工作|初级前端开发需要会哪些

» 本文来自:前端开发者 » 《前端开发如何实现图片预加载》
» 本文链接地址:https://www.rokub.com/4068.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!