热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JS中加载图片问题

JS中经常使用的创建img标签的方法varimgnewImage();img.src“http:img0.imgtn.bdimg.comitu199974

JS中经常使用的创建img标签的方法

var  img = new  Image();
img.src = “ http://img0.imgtn.bdimg.com/it/u=1999746274,3629967018&fm=21&gp=0.jpg” //网络地址
img.Onload= function{ //图片的加载事件 图片加载完成时调用
alert(“这是一张图片”);
}
document.body.appendChild(img);

在网页加载过程中,加载图片是一项让人很头疼的工作.一个页面中可能会存在多张图片,而图片的加载过程需要较长的时间,影响整体网页的加载效果,所以我们一般会对图片的加载进行一些简单的处理.

一.图片预加载

预加载的目的:
*1.浏览器有限使用缓存进行读取图片
* 2.当图片的数据源没有发生变化的时候,图片预加载解决了图片重复加载的问题












二.图片懒加载
懒加载:网页中有许多img标签,这些img标签的src指向了服务器地址,当浏览器从上向下读取的时候,src对应的网址会加载这张图片,但不会同时读取所有的图片,而是只加载用户可视范围内的图片,这个过程叫做懒加载.

懒加载的目的:
*1.避免一次请求过多的内容,加快网页加载速度
*2.提升页面有好度,提升SEO
*3.较少服务器压力


















推荐阅读
author-avatar
尊园2010_630
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有