博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
懒加载预加载(图片)
阅读量:7090 次
发布时间:2019-06-28

本文共 558 字,大约阅读时间需要 1 分钟。

懒加载:只显示当前所能看到的页面的内容,这样做的好处可以减少服务器的压力,当页面继续往下拉的时候,再继续加载内容。

预加载:一般用于图片加载,预先加载图片,还可以预先判断图片是否加载成功,如果加载不成功,可以使用本地图片替换,这样也能达到美观的效果.

懒加载的主要代码:if(imgHeight < document.documentElement.clientHeight + document.documentElement.scrollTop){   //这里写要执行的函数 }

预加载的主要代码:

var temp_img = new Image()

temp_img.src = img_url +img.dataset.src;

temp_img.onload = function(){//这是加载成功的情况

img.src = img_url + img.dataset.src;

}

//加载失败的情况

temp_img.onerror = function(){

img.src = 'img/0.jpg';

}

说明:dataset是自定义属性,保存真正的img地址,img_url是图片静态地址。

 
 

转载于:https://www.cnblogs.com/ZM-ONE/p/8516392.html

你可能感兴趣的文章
各大互联网公司架构演进之路汇总
查看>>
[转载].NET平台测试驱动开发模拟框架Moq简明教程(简介)
查看>>
xmlHttp
查看>>
Eclipse编译报Javascript和jquery错的解决办法
查看>>
C#字符串的简单用法
查看>>
EXPORT_SYMBOL的使用并以使用do_adjtimex调节内核tick_length(滴答长度)为例的说明...
查看>>
[转]WIN7服务一些优化方法
查看>>
(转)Markov Chain Monte Carlo
查看>>
Zabbix 常见问题处理整理
查看>>
PI AAE (Advanced Adapter Engine) 介绍一
查看>>
OEA体验:查询面板
查看>>
什么是VC维?
查看>>
SuperMap IS.NET自定义Action之兴趣点标注(转)
查看>>
HDOJ-1035 搜索模拟问题[深搜]
查看>>
C 猴子选大王(亚瑟夫环)
查看>>
关于Android中的SlidingMenu中的用法
查看>>
C++杂项
查看>>
判断一个文件被修改(转)
查看>>
《HTTP权威指南》读书笔记:缓存
查看>>
explain之三:MYSQL EXPLAIN语句的extended 选项学习体会,分析诊断工具之二
查看>>