javascript - 如何在延迟加载时使图像可见

标签 javascript jquery css xhtml lazy-loading

我正在尝试使用 jquery“延迟加载”一堆图片,但在加载页面时它们不会出现在屏幕上。我知道 xhtml、基本的 js 和 css。我见过许多不同的“延迟加载”解决方案,但我无法使它们中的任何一个发挥作用。

这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>  
<body>
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
    <img data-original="image.jpg"  width="640" height="480" class="lazy">
  <script>$("img.lazy").lazyload();</script>
</body>
</html>

我的问题是:我做错了什么,以至于当我加载页面时,文件“image.jpg”没有出现。

最佳答案

如果您使用来自 GitHub 的源代码,并将其直接链接到您的元素,则会抛出错误:

Refused to execute script from 'https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

请确保您有本地副本并在本地执行。

本地检查,执行良好! :) 您使用的代码是正确的,除了热链接 JavaScript。

关于javascript - 如何在延迟加载时使图像可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26468777/

相关文章:

javascript - 如果条件满足则订阅,否则返回/退出 rxjs

javascript - React Higher Order Component - 从包装器组件调用包装组件中的函数

javascript - 在 Javascript 中获取多值变量的连接字符串

jquery - 显示为三个单元格的 block 必须删除 cellspacing

jquery - CSS 没有链接/显示?

css - 在 AngularJS 中将 md-button 放在图像上

javascript - 从共享主机拥有的站点压缩 css、图像和 js 文件

javascript - 我如何在 Highchart 中使列和 y 轴之间有 1px 的空间?

javascript - 在 css 中暂停特定时间的交互动画

html - 将按钮背景图像居中放置在容器中