根据设备不同，加载不同尺寸图片

针对自适应网站，图片是最难把控的，特别是banner类型的大图片。

js：

$(function(){//根据不同浏览设备，加载不同图片pic_html();function pic_html(){if($(window).width()<720){$(".pic-html").attr("src","img/pic-html-mobile/banner3.png");}else{$(".pic-html").attr("src","img/pic-html/banner3.png");}}//当调整浏览器窗口的大小时，发生 resize 事件$(window).resize(function(){pic_html();})
})

html：（）

加载bootstrap.min.css、jquery.js、bootstrap.min.js、以及上述js

<div class="container"><div class="row"><div class="col-sm-12"><img style="width: 100%;" class="pic-html" src="img/pic-html/banner3.png" /></div></div>
</div>

总结：$(window).width()得窗口大小

$(window).resize():当调整浏览器窗口大小时，发送resize事件

疑问：可将图片放于div的background中吗？

思考：宽度可以自适应，高度呢，不设置能够显示吗

之后实际操作中再实际操作。

根据设备不同，加载不同尺寸图片相关推荐

Picturefill.WP – 根据屏幕尺寸加载合适的图片
Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度.例如用户用手机访问站点,该插件会选择 ...
lazyload.css,图片加载优化及图片lazyload自适应 - 轩枫阁
前言本文介绍针对轩枫阁V3主题开发过程中,遇到的图片问题及加载优化. 图片居中裁剪本站的每一篇文章,都会配一张570×200的特色图像,使文章不那么单调. 然而移动端移动端首页图片为60×60的正 ...
使用Glide加载、缓存图片、Gif、解决背景出现浅绿色、GlideModules冲突
之前一直使用Volley ImageLoader.或者Picasso,无意间发现Glide,觉得真的是棒棒的. 1.和其他的一样在Module的build.gradle中添加依赖 compile 'c ...
使用Glide加载、缓存图片、解决背景出现浅绿色
之前一直使用Volley ImageLoader.或者Picasso,无意间发现Glide,觉得真的是棒棒的. 1.和其他的一样在Module的build.gradle中添加依赖 compile 'c ...
如何加载那个大图片
前言我们要说点什么: 1.我们应该怎么加载一个大图片,从而避免OOM(我喜欢stackoverflow.com的名字) 2.我们是否应该鄙视:setbackgroundresource等直接通过一个 ...
美化加载失败的图片(Stying broken images)
原文出处https://bitsofco.de/styling-broken-images/ 翻译:王浴昊注明出处,本文可以转载. 加载失败的图片很丑陋. 事实上并不一定要如此.我们可以通过对< ...
swift 加载gif 框架图片
swift 加载gif 框架图片 SwiftGifOrigin 以下代码轻松搞定 let imgView = UIImageView(frame: CGRect(x: 50, y: 100, wid ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
解决GitHub加载不出图片问题
解决GitHub加载不出图片问题参考文章: (1)解决GitHub加载不出图片问题 (2)https://www.cnblogs.com/jooy/p/12090882.html 备忘一下.

根据设备不同，加载不同尺寸图片

根据设备不同，加载不同尺寸图片相关推荐

最新文章

热门文章