首页 \ 问答 \ 使用javascript为用户延迟加载内容的更好方法是什么?(What is a better way to lazy load content for users with javascript?)

使用javascript为用户延迟加载内容的更好方法是什么?(What is a better way to lazy load content for users with javascript?)

我有一个页面,有很多图像和其他代码,如果它是延迟加载将更好。

我一直试图用noscript标签做这个,但我只是注意到它在IE中无法正常工作。 它适用于我测试过的所有其他浏览器(ff,opera,chrome,safari等),所以我有点沮丧。

我很确定在某个时刻我实际上已经在IE中工作了,因为我已经使用了一段时间的技术并且我经常测试IE ...但它现在不能正常工作而且我谷歌的一切似乎都在建议它永远不会奏效。

这是一个复制和粘贴的简单示例,显示了我正在尝试的内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

用于具有javascript且没有javascript的用户的html是相同的。 我只是使用jquery来标记内容以便于查看。 由于内容是在javascript中标记的,因此当选项卡打开时需要延迟加载,因此当页面具有相当大的附件时,最初下载不需要很长时间。

如何在不输出html的情况下实现这一目标?


I have a page that has lots of images and other code that would work better if it is lazy loaded.

I have been attempting to do this with the noscript tag but I just noticed that it is not working correctly in IE. It works in every other browser I tested (ff,opera,chrome,safari,etc) so I am a little frustrated.

I am pretty sure at one point or another I actually had this working in IE because I have been using the technique for a little while and I test IE quite frequently... but it isn't working now and everything I google seems to suggest that it never worked.

Here is a simple example to copy and paste that shows what I was attempting:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

The html used for users with javascript and without javascript is the same. I just use jquery to tab the content to make it easier to view. Since the content is tabbed in javascript it needs to lazy load when a tab opens so it does not take ages to download initially when the page has sizable attachments.

How can I achieve this without outputting the html more than once?


原文:https://stackoverflow.com/questions/4786985
更新时间:2019-10-16 04:38

最满意答案

您需要做的是让所有图像都指向像素gif(或png)。 编写一个脚本,检查用户是否在图像附近滚动,然后使用Javascript将像素与完整图像交换。

在我编写的脚本中,您将拥有一个如下所示的图像标记:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

或者,您可以使用这样的插件 。 注意:我之前没有使用过这个插件,但它看起来就像你需要的一样。

如果你真的想要获得硬核,你可以使用像h ead.jscontrol.js之类的东西来加载你的javascript


What you need to do is have all the images point to a pixel gif (or png). Write a script that checks if a user has scrolled near an image, and then use Javascript to swap the pixel with the full image.

In scripts I have written, you would have an image tag that looks like:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

Alternately, you could use a plugin like this. Note: I have not used this plugin before, but it looks like it's all you need.

If you really wanted to get hardcore, you could lazyload your javascript using something like head.js or control.js

2011-01-24

相关问答

更多

Scala / Clojure使用什么汇编程序?(What assembler did Scala/Clojure use? [closed])

Clojure使用ASM库直接生成字节码。 ASM是一个非常好的和广泛使用的库。 Clojure uses the ASM library to generate bytecode directly. ASM is a very good and widely used library for this purpose.

去 - 解析不是“标准”格式的日期/时间字符串(Go - Parsing date/time strings which are not 'standard' formats)

有一些关键的值,时间.Parse正在寻找。 通过改变: test, err := time.Parse("10/15/1983", "10/15/1983") 至 test, err := time.Parse("01/02/2006", "10/15/1983") 解析器将会识别它。 这是操场上修改的代码 。 package main import "fmt" import "time" func main() { test, err := time.Parse("01/02/

Firebase允许拒绝(Permission denied with Firebase)

您可以提供".read": "auth != null"以允许所有授权用户读取users对象下的数据并防止未经授权的用户阅读它。 You could give ".read": "auth != null" to allow all authorised users to read data under users object and prevent unauthorised users from reading it.

如何使用javascript注入一个大的html代码点击按钮?(How can I inject a large html code onclick of a button using javascript?)

HTML <div id="form-container"> </div> <button id ="get-form" onclick="getForm()">Get Form</button> 使用Javascript <script> var form = '<form> <h1>form title</h1> </form>'; function() { document

从double到int的可能有损转换(Possible lossy conversion from double to int)

将用作数组索引的所有变量从double更改为int(即变量j , first , i )。 数组索引是整数。 Change all your variables used as array indices from double to int (i.e. the variables j, first, i). Array indices are integer.

Python中的模块化编译器(Modular Compiler in Python)

您想使用像stevedore这样的现有插件库。 它将为您提供枚举可导入文件的工具,以及导入这些模块的工具。 You want to use an existing plugin library like stevedore. It will give you the tools to enumerate files that can be imported, and tools to import those modules.

PrimeFaces条码样本(PrimeFaces Barcode sample)

您是否已将barcode4j和qrgen库添加到依赖项中? <dependency> <groupId>net.glxn</groupId> <artifactId>qrgen</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>net.sf.barcode4j</groupId> <artifactId>barcode4j-light</artifactId>

如何在Objective-C中使用本地静态对象?(How to use local static object in Objective-C?)

我希望我没有遗漏任何东西,但这就是我使用它的方式: - (void)foo { static NSMutableArray *mutableArr = nil; if (mutableArr == nil) { mutableArr = [[NSMutableArray alloc] init...]; // add more first time initialization as required } assert(mutabl

相关文章

更多

最新问答

更多
  • 在svg - gstatic urls中嵌入'Open Sans'字体(Embedding 'Open Sans' font in svg - gstatic urls)
  • 停止python线程等待popen?(stopping a python thread waiting for popen?)
  • Julia:如何从文本文件导入图形(csv具有不等数量的'列')?(Julia: How to import a graph from text file (csv with unequal number of 'columns')?)
  • 在另一个插件中使用qgis核心插件(Useage of qgis core plugin in another plugin)
  • jQuery .get缓存工作得太好了?(jQuery .get caching working too well?)
  • Gameplay3D gameplay :: TimeListener(Gameplay3D gameplay::TimeListener)
  • 获取ItemDataBound中的行数(Get row count in ItemDataBound)
  • NHibernate SchemaExport(config).Create(false,true)不会使用SQL Server 2014 LocalDB创建数据库架构(NHibernate SchemaExport(config).Create(false, true) does not create DB Schema with SQL Server 2014 LocalDB)
  • 列出迭代器失效(List iterator disfunctionality)
  • 列出多个变量的理解(List comprehension with multiple variables)
  • 如何在asp.net MVC5中显示锁定结束时间(How to Display locking end time in asp.net MVC5)
  • 在android中的ImageView上显示TextView(Display TextView over ImageView in android)
  • 64位sharemem.pas / borlndmm.dll XE2(64-bit sharemem.pas/borlndmm.dll XE2)
  • 为什么分离和追加比直接更改html更有效?(Why is detaching and appending more efficient than changing html directly?)
  • Eclipse将“排序成员”设置保存到repo(Eclipse Saving “Sort members” settings to repo)
  • 当我查看最近标记的instagram API时,为什么帖子似乎会改变(why do the posts seem to change when i look at the recent tagged instagram API)
  • 使用php邮件功能发送电子邮件 - 变慢[关闭](Sending email using php mail function - Getting slow [closed])
  • Web服务器可以写入登录用户的屏幕吗?(Can a web server write to a logged-in user's screen?)
  • CFNetwork匿名密码?(CFNetwork Anonymous Ciphers?)
  • 更快的算法来计算一个范围内的特定整数可以分割多少个数字(Faster algorithm to count how many numbers are divisible by a specific integer in a range)
  • 用于散点图的Matplotlib FuncAnimation(Matplotlib FuncAnimation for scatter plot)
  • Gradle:Manifest merge更改AndroidManifest文件中“theme”参数的值:(Gradle: Manifest merge changes the value for the “theme” parameters in the AndroidManifest file:)
  • 如何在属性中渲染cms / static块(How do I render cms/static blocks in an attribute)
  • Javascript显示错误和页面重新加载问题(Javascript display error and page reload problems)
  • android官方固件签名(android official firmware signature)
  • 在这种情况下,有比eval()更好的方法吗?(Is there a better way than eval() in this scenario?)
  • primefaces commandbutton actionlistener未调用(primefaces commandbutton actionlistener not called)
  • C将指针传递给堆栈上的数组(C passing a pointer to an array on the stack)
  • 简单的产品内部可配置产品(Simple product inside configurable product)
  • nhibernate HbmMapping到Xml(nhibernate HbmMapping to Xml)