懒惰加载在图像下留下巨大的间隙- CSS高度问题
懒惰加载（Lazy Loading）是一种优化网页性能的技术，它可以延迟加载网页中的资源，如图像、视频、音频等，直到用户需要访问它们时才进行加载。这种技术可以减少初始页面加载时间，提高用户体验。
懒惰加载在图像下留下巨大的间隙是由于CSS高度问题引起的。当使用懒惰加载技术时，图像元素的高度可能未被正确设置，导致图像加载前，其占位的空间大小无法正确计算，从而导致页面布局出现间隙。
为解决这个问题，可以通过以下方式进行修复：
- 设置图像元素的高度：在使用懒惰加载的图像元素上，通过CSS样式或内联样式设置固定的高度。这样可以确保在图像加载前，占位空间的大小已经被正确计算。
- 使用占位符：在图像元素加载前，可以使用占位符（如背景颜色、加载动画等）来填充占位空间，以避免页面布局出现间隙。一旦图像加载完成，再将其替换为实际的图像。
- 监听图像加载事件：通过JavaScript监听图像的加载事件，一旦图像加载完成，再进行布局调整，以确保页面显示正常。
腾讯云相关产品中，可以使用腾讯云的云存储服务 COS（Cloud Object Storage）来存储和管理懒惰加载的图像资源。COS 提供了高可靠性、高可扩展性的对象存储服务，可以满足各种规模的应用需求。您可以通过以下链接了解更多关于腾讯云 COS 的信息：腾讯云 COS 产品介绍
请注意，以上答案仅供参考，具体的解决方案和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
2回答
找不到css属性
、、、
我已经使用HTML5模板建立了一个简单的网站，然而在过去的一周里，我正在与一个css问题作斗争。从附加的图像中，你可以看到右手边和底部有一个间隙。你能帮我找出造成这种差距的html元素，以及如何修复它吗？如果您需要任何其他信息，请让我知道。网站url -
浏览 1提问于2017-11-22得票数 0
我发现listView回收视图的速度太快了。
当我的listView滚动时，屏幕上的视图立即被删除。
每个单元(行)都有使用通用图像加载器加载的图像。
从屏幕上掉下来的视图，当它们回到可见区域时，必须重新加载图像。(它显示短时间内的存根图像并加载正确的图像)。
我确实需要保持视图回收行为，但是我是否可以修改列表视图的行为，使用户不会注意到图像的不断重新加载？(也许我在缓存中保留的视图数量是常规列表视图的2-3倍)
浏览 2提问于2012-12-14得票数 2
回答已采纳
3回答
我试图做一个设置类似于youtubes的视频网格。
问题就在标题上。我看到youtube用“.”来缩短标题。不再有两条线长。
我不知道该怎么做，所以我用我现有的东西工作。
下面是带有占位符标题的视频网格的图像，它看起来和工作都很好：
然后，当我将实际标题应用到视频网格时，它们太长了，并破坏了网格。
然后，我尝试使用不同的CSS来尝试折叠或破坏附带的单词，如：word-wrap和white-space。由于某种原因，所有可用的参数都无法工作。因此，我尝试将width应用于它，以便将单词“压缩”在一起。这是可行的，但它打破了网格的准确性。
我还有别的办法吗？这是一个网
浏览 4提问于2011-07-23得票数 4
回答已采纳
我有在桌面屏幕上显示在折叠上方的图像，但在较小的移动屏幕上显示在折叠下方。我希望这些图像在显示在文件夹下面时使用本地延迟加载属性。有没有办法通过媒体查询做到这一点？谢谢 我想做的是： CSS:
@media screen and (max-width: 600px) {
.lazy {
loading: lazy;
}
}
HTML:
<img class="lazy" src="
浏览 16提问于2021-09-02得票数 1
3回答
我正在建立一个包含横向和纵向图像的图库，但我无法让它们适应所有等高的图像网格(例如，肖像图像的裁剪视图，这样它们就不会拉伸行高，从而导致同一行中的其他图像严重拉伸)。我当前的代码如下所示：
HTML：
<div class="grid-three">
<a href="#img1"><img src="landscape1.jpg" class="thumbnail"></a>
<a href="#img2"><img src="land
浏览 0提问于2019-12-23得票数 0
1回答
面临的问题:在我的应用程序中应用的CSS网格在单元格之间存在水平间隙。当屏幕在移动模式下切换时，这些水平间隙就会出现，如所示。这个问题在较小的屏幕(移动)和当细胞有相同的背景颜色显示在CodeSandbox中时是突出的。
如何重现我面临的问题：要查看CodeSandbox中的问题，请选择沙箱中的图标“在新窗口中打开预览”。在新浏览器中，右击并选择“检查”并进入移动屏幕。或如果您能够进入沙箱编辑模式，请选择“切换响应视图”(位于“浏览器”选项卡下的url栏右侧的第二个图标)。
我所需要的:如果可以修改上面的代码以消除这些空白，或者显示一个解决问题的代码片段，这将是非常感谢的。
浏览 0提问于2022-05-08得票数 0
我目前正在我的投资组合网站上工作。然而，在曼森的作品中，我发现每个图像的底部都有一个垂直的和水平的缺口。我设置了边距，填充为0，但是它没有消失。让我感兴趣的是，当我调整窗口的尺寸时，水平间隙就会消失，但是图像的小部分是与下一张图像重叠的(必须仔细观察)。
img {max-width: 100%;
}
#content {
width:100%;
}
.container{
width:50%;
float:left;
}
我不知道它是否能用CSS..。
我希望没有垂直和横向的差距，也不重叠。我怎样才能做到这一点？
你的帮助将不胜感激。好了！
浏览 1提问于2013-11-09得票数 0
回答已采纳
我正在使用QGraphicsView框架来显示较小的QPixmap磁贴的大图像。我还想启用抗锯齿，因为场景将包含行项目。当我启用抗锯齿时，为什么我会看到磁贴之间的间隙？
class MainWindow : public QWidget
{
public:
MainWindow(QWidget *parent = 0);
protected:
void resizeEvent(QResizeEvent*);
private:
QGraphicsScene* _scene;
QGraphicsView* _view;
qreal _scale;
浏览 2提问于2015-08-10得票数 1
1回答
考虑以下HTML：
<div class="plaisio">
<div id="phone">
<img src="img/phone.png" >
</div>
<div id="phone_num">
<img src="img/phone_num.png" >
</div>
</div>
及其对应的CSS：
.plaisio{
overflow: auto;
ma
浏览 1提问于2014-04-19得票数 0
1回答
嵌套砖石对象
、、、、
我正在尝试使用容器创建一个图形视图。所以如果: A's -> B's -> C's，视图将显示一个对象c，在B中，这是在As中。
如下所示：
我认为砖石视图非常适合这种情况，但是我不能让嵌套正常工作。
到目前为止我所拥有的：
我不明白他们为什么不对齐。我还尝试使用CSS的列计数和列间隙，但发现呈现非常有缺陷。
小提琴代码因为我必须...
var $container = $('.container');
$container.masonry({
/*columnWidth: 200,*/
itemSelector: &#
浏览 0提问于2013-08-23得票数 4
2回答
我最近注意到，我的网站在Chrome中出现故障，尽管在Firefox中显示得很好。在我的页面上研究了HTML和CSS之后-
在Chrome的4个蓝色标题下面有一个比Firefox更大的间隙--这打破了包含框的框架。这似乎与我正在使用的表格布局的填充/边距有关，但我正在努力解决这个问题。
如果任何人能阐明一些可能导致问题的原因，我将不胜感激！
浏览 0提问于2011-12-05得票数 4
回答已采纳
这是CSS脚本。
img {
max-width: 50vw;
width: 50%;
}
下面是情况，。
调整右下角的宽度，直到您在页面底部看到图像的底部。
现在，缩小宽度，直到您注意到图像的底部比页面底部短。
我想要的是图像一旦高度到达页面底部就停止调整大小，这样当它变得更小时就会出现一个滚动条。
我认为最大宽度可能是这个问题的答案。
浏览 4提问于2017-09-17得票数 1
我刚刚在我的主页中插入了一个图像滑块，当浏览器窗口调整大小时，它会缩小内容。
然而，我的问题是，在它下面有一个div，当图像滑块自身调整大小时，它不会向上移动，所以我留下了一大段空白。
这与滑块下面的div的CSS有关吗？
HTML
<div id="slider1_container">
<!-- Loading Screen -->
<div u="loading">
<div id="loadingchild1">
浏览 2提问于2015-02-16得票数 1
回答已采纳
我正在尝试制作另一个lightbox作为非常需要的HTML/CSS/Javascript实践，但我遇到了一个看起来微不足道的样式问题(很可能就是这样！)但我就是解决不了。
我有一个包含img的div。无论我尝试什么(border、margin、padding、auto height等)我就是不能让div缩小到与图像尺寸相匹配。我将问题简化为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
浏览 2提问于2012-06-21得票数 87
回答已采纳
3回答
我有一个高度为300px的div。我想要有一个或多个子图像，根据这个高度缩放。
当我将img与下面的#src CSS一起使用时，它工作得很好。宽度和高度没有定义为像素分辨率，所以如果我更改#wrap的高度，它会按应该的比例缩放。
有没有可能在不定义像素宽/高的情况下对CSS背景(没有Javascript)做同样的事情？我可以将宽度设置为100%，并在其中放置一个max- width，但这会将图像限制为max-width，如果图像小于max-width，则在右侧会有一个间隙(根据max-width的值，这个间隙可能非常大)。
谢谢!
#wrap
{
width:100%;
h
浏览 9提问于2018-02-09得票数 1
3回答
我正在开发一个地图应用程序，我遇到了一个问题，就是我的瓦片在缩放时是如何铺设的。
下面是我的结构的基本情况：
显然还有更多的事情在进行，但你已经明白了。现在，我缩放地图应用程序Sprite以进行放大。当缩放发生时，每个平铺之间会有一个间隙。
你可以在这里看到4个瓦片相交的间隙：
我将所有内容都缓存为位图。对于每个层(都扩展了Bitmap)，我将smoothing设置为true，将pixelSnapping设置为PixelSnapping.ALWAYS (像素捕捉在这里不会有什么帮助，但也不会有什么坏处)。
有没有人对如何解决这个问题有什么建议？
(为了完整起见，地图应用程序
浏览 0提问于2012-12-15得票数 0
回答已采纳
这是我在Mathjax中使用的latex。
\class{mathjaxCursor}{\text{_}}
...and这里是css：
.mathjaxCursor
{
font-weight: bold;
background-color: red;
}
这会产生以下结果：
现在来看一些不同的latex：
5\class{mathjaxCursor}{\text{_}}
CSS相同，但会产生以下结果：
我已经包含了红色背景来说明这个问题。当5出现时，下划线的高度是整个字体的高度，如果没有它，高度就是下划线的高度。您能否建议更改CSS，使下划线具有正常的字符高度？
原因
浏览 11提问于2018-08-15得票数 2
回答已采纳
我正在使用NSDrawNinePartImage绘制自定义按钮/文本字段。我在代码中将图像分割为9个部分，并使用NSDrawNinePartImage将其绘制成矩形。
不幸的是，我在绘图模式中得到了一些间隙。我认为这与我的切片代码有关，但我将它们保存为图像，它们看起来都很好(我甚至将它们放在一起，看起来也很好)。在某些情况下，我使用它可以很好地工作，尽管有些情况下使用相同的图像。
我很有信心，这可以归结为实际的绘图。
您是否知道有任何NSGraphicsContext或其他设置会影响它或其他可能导致此问题的因素？
有间隙的
无间隙
浏览 3提问于2011-06-05得票数 6
2回答
我正在构建一个应用程序，需要一个完整的页面背景图像。我使用角JS和CSS3作为背景图像。
在页面加载时，将命中<body back-img>自定义指令并运行以下代码：
var grindModule = angular.module('grindApp', ['ngRoute'])
grindModule.directive('backImg', function(){
return function(scope, element, attrs){
var url = ['./../static/images/
浏览 3提问于2016-02-25得票数 2
回答已采纳
3回答
我已经使用了这个插件来加载图片。
当我向下滚动正在加载的页面图像时，它工作得很好，但当页面加载时，我需要显示第一行图像。
我该怎么做呢？
浏览 2提问于2012-09-24得票数 1
1回答
我有一个属性表，并在第一个页面添加了三个图片。我添加了一个图片控件，在该图片控件的属性中，我为“pages.In”属性设置了一个bitmap.And，它能够加载非常successfully.But的内容，这里的问题是，当我运行我的exe时，我在页面标题上得到了位图(这是页面的某种横幅)。但是我注意到，在标题位图和框架边缘(发生在右上角)之间有一些间隙。当我在日语机器上运行我的xxx.exe时，我观察到工作表有些拉伸，横幅位图直到工作表的边缘(右上角)才完全拉伸，例如，如果我们在加载位图上进行对话，那么我们可以观察到它完全被拉伸到边缘。那么，我们如何才能避免这个问题，不管是什么操作系统，无论分辨
浏览 0提问于2014-09-11得票数 1
我正在使用jQuery Cycle插件，在应该有平滑的淡入/淡出过渡的情况下，图像之间的间隙出现了问题。这只会在IE7中发生。
我已经看到了之前的帖子，关于在其他元素中嵌套图像以掩盖它们是png图像的事实。
有没有办法让这一过渡变得平稳？
谢谢。
浏览 0提问于2009-08-06得票数 1
3回答
我在head上加载了一些js和css文件。在最后一个js文件之后，在浏览器开始加载图像之前，(在火狐上)有一个1311ms的间隙。
Firebug不会在这个空白处显示任何状态。
什么意思？为什么我的图像加载这么晚？
缓存中的所有图像，差距仍然存在...
完全无缓存加载：
浏览 0提问于2011-08-02得票数 11
回答已采纳
2回答
我有一个缩略图大小的问题。在图片中，左边中间应该有另一张白色区域的图片，但由于上面的图片有一个很长的标题，所以跳过了空格。每次显示带有长标题的图片时，图片的大小都会变大。有没有办法在标题变长的情况下调整缩略图的大小？
这是我的HTML代码和CSS，我什么也没写。
<div class="panel-body">
<div id="recipeResults" class="row">
<!-- templates/BasicImages/imageTemplates.js -->
</d
浏览 2提问于2017-03-29得票数 0
我正在加载一个图像，然后将该图像绘制到画布上。我也正在缩小图像，以适应画布。当我这样做时，图像以适当的宽度绘制到画布上，但其高度约为画布实际高度的1/4。
//Calculate height from canvas-to-image width ratio
var width = canvas.width;
var height = ( width / img.width ) * img.height;
//Draw scale image (This results in a squished height, despite "height" being correct)
浏览 3提问于2014-05-11得票数 1
回答已采纳
今天我在这里读了相当多的问题，希望能回答我的问题，但无济于事，所以我希望这里的人能帮助我。
我试图发展我的网站，以响应式的网页设计，并与图像有问题。
问题：
我试图从我的css中加载被标记为背景图像的图像，但由于我加载它们的容器中没有内容，因此将高度设置为auto将导致没有图片，因为从技术上讲，容器为0而没有任何内容。我需要将高度设置为自动，因为我需要图像与网页缩放，以便它将保持比例，而不是大的空白空白。
我知道要让我的背景图像缩放，我必须将我的css设置为：
background: url(../images/image.jpg);
background-repeat: no-repeat;
浏览 5提问于2013-02-26得票数 1
4回答
我在处理div块之间的空格时遇到了困难：
<div id="maincontentwrapper" >
<img src="images/content-top.png" alt="main content border image" border="1" />
<div id="maincontent" >
<div id="pagecontent">
<h1>Mission Statement</h1
浏览 0提问于2010-08-05得票数 2
回答已采纳
1回答
我试图添加一个描述后的图片，翻转到不同的图像，但总是有一个空白以下的图像。我认为我可以在描述中添加margin-top:-200px，以消除这一差距，但我想确切地知道是什么原因造成的，以及是否有其他方法解决这个问题。
这对我来说是非常新的，因此为什么这个问题可能是可笑的愚蠢。谢谢您抽时间见我!
浏览 4提问于2017-01-18得票数 0
回答已采纳
2回答
我正在尝试创建一个水平任务栏。我想使用自定义图像，并让它们缩小以适合自己。我为此创建了一个类，它缩小了无序列表中的图像，但它使图像具有巨大的差距。我如何缩小，然后强制列表图像移动到彼此之间的小间隙？
示例图像：
列表：
<ul>
<li>
<a href="link1.html">
<img src="images/homepagebutton.png" class="taskbarimages">
浏览 1提问于2018-10-12得票数 0
3回答
html页面上的图像加载问题
、、、、
请参阅上面的图片，当我刷新页面时，图像不会加载，但是如果我将选项卡从男性更改为女性，将显示图像。即使我更改了CSS中的任何内容，也会显示图像。无法获得图像不直接显示的原因。
其他图像按需要正确显示，但我遇到的一些图像出现了此类问题。
浏览 6提问于2016-12-16得票数 0
回答已采纳
2回答
我正在尝试创建一个水平砖石布局，只使用CSS和flexbox。我遇到的问题是，元素之间存在垂直间隙，如果不使用align-left: stretch;，是否有可能关闭这些间隙？
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
.card {
width: 25%;
flex: 1 0 auto;
}
浏览 0提问于2015-02-24得票数 24
回答已采纳
1回答
网站iPad显示中的渲染问题
、、、、
在我的网络开发生涯中，我遇到了最奇怪的问题，而我似乎无法解决这个问题。
几个月前，我开发了一个网站: www.ktngroup.co.uk，在所有设备上都运行得很好。现在看来，该网站似乎开发了某种形式的问题，仅限于ipad。奇怪的是，当使用css用户代理和屏幕大小时，我无法复制它，这很奇怪，因为它看起来像是css问题。
我不能很好地描述这个问题，但是看起来所有的内容(除了标题)都是从ipad上删除的，而不是显示出来的。此外，在使用adobe边缘检查时，我发现我的css规则没有应用于元素。
将1024 to的桌面版本与ipad进行比较，是发现问题的最佳方法。
更新:当我取消iPad时，完全加载站
浏览 4提问于2014-03-09得票数 1
回答已采纳
谁能告诉我为什么在图片下方和导航栏上方会有一条线(背景色，本例中是红色)？Firefox和Chrome都会显示红线，所以我假设它是按照预期呈现的。但我似乎无法通过开发人员工具找到这个问题。边框、填充和边距都是0，这很令人费解。以下是代码的精简版本，即
<body>
<div id="main-wrapper">
<header id="main-header">
<img id="title-image" src="http://i.imgur.com/Ja
浏览 2提问于2012-01-12得票数 4
回答已采纳
2回答
我有个问题。
我正在使用jQuery为一个图像分配一个最大高度。最大高度值是通过获取徽标图像旁边幻灯片的高度来生成的。请查看该网站：
受影响的代码是：
var sliderHeight = $('.flexslider').height();
$('#logo img').css({'max-height': sliderHeight});
$(window).resize(function() {
var sliderHeight = $('.flexslider').height();
$('#lo
浏览 0提问于2013-05-24得票数 0
4回答
我试着把这个css菜单拼凑在一起，但是我不能正确地把它放在一起。当你点击顶部菜单中的任何链接时，它会打开第二个菜单，但当你点击它时，第二个菜单就会消失。另外，它放错地方了。我不能把它放在左边:0
#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:
浏览 0提问于2012-03-17得票数 0
回答已采纳
1回答
我似乎找不到这个相当有趣的问题的答案。在google chrome中，具有设置的宽度和/或高度的图像，无论是使用属性、内联样式还是css样式，在初始加载时都拒绝显示在页面上。它们似乎只有在页面活动之后才会出现。然而，如果您让图像加载到它们的自然大小，它们在页面加载上显示得非常好。这些图像可以在其他浏览器中看到，当检查chrome中的元素时，图像会显示在弹出窗口中。
有人知道怎么解决这个问题吗？
浏览 2提问于2012-07-25得票数 1
回答已采纳
看看吧。右边的图像应该在它们的div中居中。但如果你仔细观察，在顶部有一个大约3像素的小边框。如果您禁用overflow: hidden (通过firebug或IE8等效项)，它将突出底部。
HTML是这样的：
<div class="small">
<img src="/images/photos/Bedroom.jpg" alt="Bedroom" />
</div>
<div class="small">
<img src="/images/pho
浏览 4提问于2009-09-02得票数 3
回答已采纳
4回答
我有一个被加载到浏览器中的背景图像，但是它没有呈现在页面上。下面是代码：
<body>
<div id="mainContainer">
</div>
</body>
CSS
#mainContainer
{
background-image:url('bckgrdImg.png');
}
就这样。我只需要图像渲染。同样，当我在Chrome中检查页面时，我看到该图像正在加载到浏览器中，但它不在网页上。有什么想法吗？谢谢。
浏览 3提问于2012-11-02得票数 0
回答已采纳
1回答
我有一个网站(不是我做的)，当我调整大小以测试响应性时，它可以正常工作，但当它返回并向下滚动(然后向上滚动)时，在标题和下面的元素之间似乎出现了一个间隙。
网址：
调整大小和滚动前的：
调整大小并滚动后的：
这个网站使用了很多插件和css：
问题是我需要一些提示来解决这个问题，因为我还没有任何CSS工作的经验。
浏览 26提问于2018-07-06得票数 -2
1回答
无缝隙砌体画廊布局
、、、、
我想创建一个砖石画廊，但没有空白之间的图像。我试过砖石(树叶间隙)，同位素(树叶间隙)，包装(似乎做我想做的，但留下交错的图像底部的布局)。
例如,
我想要一个正方形的图像。比如说1000x1000。在这方面，我想有各种大小的图像适合在布局。
有人知道怎么做我想做的事吗？
浏览 2提问于2017-02-13得票数 1
回答已采纳
在我的测试应用程序中，我希望在顶部使用单像素线设置可变高度表格单元格的样式。这是我正在使用的绘图代码，但它不起作用。
以下是头部的代码：
// In OneLine.h
@interface OneLine : UIView {}
@end
和绘图代码：
// In OneLine.m
- (void)drawRect:(CGRect)rect {
// Drawing code
[[UIColor blackColor] set];
UIRectFill(rect);
[[UIColor whiteColor] set];
UIRectFill(CGR
浏览 0提问于2009-09-22得票数 0
回答已采纳
添加动态样式，在主题选项区域加载自定义选项，但我被如何添加背景大小属性难住了。每次我添加它，我都会得到“无效的属性值”。这是我正在使用的；
$style_setting = $cust['title_size'];
$style_line = ".title-image { background-size: {$style_setting}; }";
wp_add_inline_style( 'main_css', $style_line);
我可以使用{ background : url({$style_setting})获取要加载的背景图像；
浏览 2提问于2018-06-12得票数 0
我试着制作一个全屏幻灯片-- 的效果如何，但我对如何做到这一点有疑问。从我的例子小提琴可以看到，我希望图片尽可能大，而不扭曲它(适合屏幕)。我也希望它是垂直和水平的中心。
水平对中--它是在css中处理的，但我不得不使用JavaScript进行垂直对中。
我的问题是：
是否有更好的方法来做到这一点(例如，所有的CSS)？
在第一次加载时，如果图片(在缩放之前)比视图端口更宽，则在我的脚本计算视图端口的高度时，会出现一个滚动条。这意味着当我的脚本适合div和img到窗口时，底部有一个白色的间隙，即滚动条的高度。我可以通过指定溢出:隐藏来解决这个问题，但这似乎有点麻烦。有更好的办法吗？切换
浏览 5提问于2011-07-25得票数 0
回答已采纳
我有一个策略，懒洋洋地加载图片到CMS (Sitecore)网站上，我想知道我是否会遇到问题，因为我没有找到它正在做的例子。
关键是要提高性能，但是减少当页面滚动时用户会被不完整的图像所困扰的副作用。
策略是对页面上的所有图像使用loading="lazy"，或者只对折叠下的图像使用，在加载页面时，动态地将所有这些元素的lazy交换为auto，然后浏览器将根据自己的优先级方案来决定何时加载图像。
重点是将图像排列在折叠上方，但是一旦加载了优先图像和其他所有内容，然后告诉浏览器通过自己的默认加载行为加载图像，这样用户就不会遇到不完整的图像。
我可能会遇到这样的问题吗？
我无法想象
浏览 3提问于2022-08-22得票数 1
1回答
这有点难以解释。我会尽我所能的。
我在div中加载了动态图像(想想提要中的Instagram图像)。图像随着屏幕的大小(响应性)而扩展或缩小。我将宽度设置为100%，高度设置为自动。问题是，在图像加载之前，div高度什么都不是，直到div随图像扩展。我希望在图像开始下载/填充div之前，div (此图像所在的框)在页面加载时设置为正确的高度。所需的结果将如下所示:在页面加载时，您有一个框的提要，这些框都设置为正确的大小，然后图像在加载时填充这些框。
我的div css是：
padding: 0 10px 0 8px;
box-sizing: border-box;
我的图像css是：
widt
浏览 15提问于2017-01-25得票数 1
好的，我让curtainX在我的图像上正常工作，但在第一次初始加载时，图像会收缩并在顶部消失，然后加载另一个图像，最后加载curtainX图像。第一个动画甚至与curtainX效果没有关系，这是有原因的吗？
jQuery('.product_show').cycle({
fx: 'curtainX',
sync: false,
speed: 1300,
timeout: 2000,
delay: 1000
});
浏览 2提问于2013-09-13得票数 0
1回答
我用的是一个叫slick的剧本。这是一个非常漂亮的图像旋转木马。只是想知道id是否能够使用下面示例中使用的延迟加载方法来使用图像sprite。如果是这样的话，我将如何编码它在那里。
<div><a href="page.htm"><img class="slide_cats" data-lazy="image.jpg"/></a></div>
浏览 2提问于2015-11-11得票数 0
回答已采纳
1回答
网页在移动上崩溃
、、
你好，我是网页设计新手，
我使用twitters引导来创建一个网站。每当我试图在移动(ios)上加载时，浏览器就会崩溃(chrome)，或者在该页面上运行得非常慢。
我想知道如何修复这个问题(如何调试它)。我的页面上有太多的图片吗？我需要降低图像质量吗？
我使用延迟加载图像使用这个插件()。这是我有的html，大约有8行图像。
<div class="row">
<div class="col-md-3">
<img class="img-responsive " src="im
浏览 2提问于2015-09-19得票数 0
回答已采纳
3回答
创建边界间隙
、、
我正在尝试在div的边框中创建一个间隙，以适合图像，类似于：
有没有办法在纯CSS中做到这一点？我能看到的只有：
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
但我的问题是border-right: 1px solid #eee;在我的图像上创建了一条线，这当然不是我们想要的。
它需要有响应能力。这张图片只是一个例子，但你可以大致了解一下。
浏览 2提问于2013-11-21得票数 0
我有一个使用的网站
它工作得很好，但现在我希望能够禁用此功能。原因是，您通常可以滚动图像，这是很好的，但我也有一个导航，您可以跳到某个特定的图像。现在，当lazyload处于活动状态时，浏览器会跳转到错误的位置，我猜这是因为lazyload也加载了一些以前的图像，所以有意使用的图像会被替换。
因此，如果子导航处于活动状态，我想禁用lazyload。像unbind..这样的东西？有可能吗？
问题是，这两种方法都需要工作。就像单击一张图片时，滚动到下一张图片(并使用lazyload)。但当激活“预览图像”时(它们是预先隐藏的，所以我想这是可能的)，停止惰性加载并加载所有图像。
浏览 0提问于2011-03-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
