相关疑难解决方法(0)

每个响应式网站开发教程都建议使用display:noneCSS属性隐藏在移动浏览器上加载的内容,以便网站加载速度更快.这是真的吗？难道display:none不加载图像或它仍然加载在手机浏览器的内容？有没有办法阻止在移动浏览器上加载不必要的内容？

是否有一种方法与javascript/jquery防止图像加载？我正在从带有图像的html列表中构建幻灯片.所以我想收集所有src数据,然后阻止图像加载.因此,当用户真正需要图像时,我会加载它.

我在谷歌上发现了一些延迟加载脚本,但无法找到阻止图像加载的方式.

提前致谢.

编辑1:
从答案中可以看出,无法使用javascript来阻止图像加载. 这是一个延迟加载的脚本.谁有人解释它是如何工作的？似乎当javascript关闭时它只是正常加载图像,当它在它上面时会在你滚动到它们的位置时加载它们.

我的网站上有一堆隐藏的图片.他们的容器DIV有style ="display:none".根据用户的操作,可以通过javascript显示一些图像.问题是打开页面时我的所有图像都被加载了.我想通过加载最终变得可见的图像来减轻服务器上的压力.我想知道是否有纯CSS方式来做到这一点.这是我目前正在做的两种hacky/complex方式.如您所见,它不是干净的代码.

<div id="hiddenDiv">
   <img src="spacer.gif" />
</div>

.reveal .img {
 background-image: url(flower.png);
}

$('hiddenDiv').addClassName('reveal');

这是方法2:

<img id="flower" fakeSrc="flower.png" />

function revealImage(id) {
 $('id').writeAttribute(
  'src',
  $('id').readAttribute('fakeSrc')
 );
}

revealImage('flower');