关于图片预加载loading及加载失败的相关问题

1.为什么网页需要loading

这是因为页面的加载是需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间越长，那么可能损失的用户量就会多。所以在恰当的时候使用loading是解决网页加载缓慢时与用户交互的最好解决方案。

2.img加载失败后，如何显示默认图片

<img src="www.baidu.com/1.jpg" />
jQuery('img').error(function(){jQuery(this).each(function(){jQuery(this).attr('src','www.baidu.com/default.jpg')//加载失败后显示默认图片});
});

3.(function(){})();——javascript中的自执行匿名函数

(function(){})()

红色括号相当于把函数定义变成表达式，起到自执行的作用。
类似的如：～function(){}(); ！function(){}(); +function(){}(); -function(){}();
-绿色括号相当于函数调用，传递参数。

4.如果页面用的不是`<img>`标签，而是背景图片如何显示默认图片

<a class="js-prd-bg-img" style="background-image: url('')" initImg="真实图片地址" href="/product/product_id" target="_blank"></a>
<img class="js-prd-bg-img js-loading"  initImg="真实图片地址" href="/product/product_id"  src=""/>function f(t) {if (t) {if (t.tagName == "IMG") {t.onerror = function() {t.src = '暂无图片url';this.onerror = null};t.src = t.getAttribute("initImg")} else {var img = new Image();//创建一个image对象img.onload = function() {t.style.backgroundImage = "url('" + this.src + "')";img.onload = null};img.onerror = function() {t.style.backgroundImage = 'url(暂无图片url)';img.onerror = null};img.src = t.getAttribute("initImg")}t.removeAttribute("initImg");x--}
}if (z.tagName == "IMG") {//img标签设置loading图片if (z.parentNode.getElementsByClassName("js-loading").length>0) {z.src = 'loading图片地址';} else {z.src = 'loading图片地址'}
} else {//背景图片设置loading图片z.style.backgroundImage = 'url(loading图片地址)'
}

5.img.onerror = null的作用

当图片加载失败的时候，我们可以利用onerror事件赋予它默认图片，但是问题来了，假如默认图片又不存在呢，即加载失败，这个时候就会陷入死循环。
为了避免死循环的情况，我们可以在执行完onerror事件后，置于οnerrοr=null 来清除onerror事件

6.img的src属性为什么要写在onload之后？

js内部是按顺序逐行执行的，可以认为是同步的
给image赋值src时，去加载图片这个过程是异步的，这个异步过程完成后，如果有onload，则执行onload

如果先赋值src，那么这个异步过程可能在你赋值onload之前就完成了（比如图片缓存，或者是js由于某些原因被阻塞了），那么onload就不会执行
反之，js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行，也就保证了onload一定会被执行到

7.js判断背景图片是否加载成功？

非背景图片时我们可以使用img的onerror来判断，但是背景图片我们就需要用img的onload进行预加载。

8.img标签的onerror事件方法在火狐中不会触发

9. 新的解决思路是使用imagesloaded.js

jQuery(prdImgListObj).imagesLoaded()imagesLoaded之前的prdImgListObj最好是最精确的范围，否则后续会将这个范围内的所有图片都拿过来，导致程序运行错误。
加js-img-loading，主要是因为mobile是往下滑动再加载下一页数据的，若不加，js执行的数据会越来越多，导致加载速度延迟。

//针对img标签
<img class="image js-img-loading" src="loading图片地址" initSrc="真实图片地址" >replaceEmptyImg('#ajax_brand_list .images','238X271');function replaceEmptyImg(prdImgListObj,imgElemObj,size){jQuery(prdImgListObj+' '+imgElemObj).imagesLoaded().progress(function(instance, image){if(image.isLoaded){image.img.src = jQuery(image.img).attr('initSrc');}image.img.onerror = function(){image.img.src =  'http://暂无图片地址/'+size+'.jpg';this.onerror = null;}});jQuery(image.img).removeAttr(initSrc);jQuery(image.img).removeClass('js-img-loading');
}

//针对background-image
<div class="pic js-img-loading" style="background-image:url('loading图片地址'), url('真实图片地址');" onclick="showPage('/product/prd_cd');"></div>replaceEmptyImgBg('#ajax_product_list','.js-img-loading','238X271')function replaceEmptyImgBg(prdImgListObj,imgElemObj,size){var loadingImagePath = 'http://loadng图片地址/'+size+'.gif';jQuery(prdImgListObj).imagesLoaded({ background: imgElemObj }).progress(function(instance, image) {if(!image.isLoaded){image.url = 'http://暂无图片地址/'+size+'.jpg';}if(image.url !== loadingImagePath) {image.element.style.backgroundImage = 'url(' + image.url + ')';}jQuery(imgElemObj).removeClass('js-img-loading');});
}

关于图片预加载loading及加载失败的相关问题相关推荐

Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件
开发四年只会写业务代码,分布式高并发都不会还做程序员? 新增 CategoryPicker 新增组件 CategoryPicker,地址级联组件的最佳方案. <CategoryPicker ...
图片预加载的问题-----有针对加载和缓存的兼容解决
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多 ...
jquery图片预加载+自动等比例缩放插件
/* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明: ...
图片预加载插件 preLoad.js
1.preLoad.js插件 1 /*! 2 * preLoad.js v1.0 3 * (c) 2017 Meng Fangui 4 * Released under the MIT License ...
前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分,花费了几个月的时间才优化到令自己满意的一半程度,,,唉,一言难尽啊! 在此将几种方法总结一下,希望能帮到不少人吧- 图片的优化有两种方式: ...
前端VUE图片预加载
前景:先来说一下图片预加载跟图片懒加载有什么区别: 1.图片懒加载:相对于项目中的图片因为网络原因加载太慢,那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来,这个时候自定义化 ...
Vue 动态加载public图片和图片预览例子
一.vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹:assets和public. 1. assets文件夹使用require()方法加载静态资源,如: require('./assets ...
jQuery插件之图片预加载
背景: 图片是web页面的重要组成部分,也是前端页面优化的重要内容.当用户访问一个比较庞大的页面时,若相关资源没有提前加载,可能会展示给用户一片空白,从而导致用户流失等:再比如受网速的影响,资源加载时 ...
图片预加载和懒加载的实现方法
图片预加载即提前加载图片,可保证图片快速.无缝地发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站. 方法1,在CSS background中加载:会增加页面的整体加载时间 #p ...

关于图片预加载loading及加载失败的相关问题

1.为什么网页需要loading

2.img加载失败后，如何显示默认图片

3.(function(){})();——javascript中的自执行匿名函数

4.如果页面用的不是`<img>`标签，而是背景图片如何显示默认图片

5.img.onerror = null的作用

6.img的src属性为什么要写在onload之后？

7.js判断背景图片是否加载成功？

8.img标签的onerror事件方法在火狐中不会触发

9. 新的解决思路是使用imagesloaded.js

关于图片预加载loading及加载失败的相关问题相关推荐

最新文章

热门文章

关于图片预加载loading及加载失败的相关问题

1.为什么网页需要loading

2.img加载失败后，如何显示默认图片

3.(function(){})();——javascript中的自执行匿名函数

4.如果页面用的不是<img>标签，而是背景图片如何显示默认图片

5.img.onerror = null的作用

6.img的src属性为什么要写在onload之后？

7.js判断背景图片是否加载成功？

8.img标签的onerror事件方法在火狐中不会触发

9. 新的解决思路是使用imagesloaded.js

关于图片预加载loading及加载失败的相关问题相关推荐

最新文章

热门文章

4.如果页面用的不是`<img>`标签，而是背景图片如何显示默认图片