目次
回复内容:
为什么要设置original属性来实现lazyload
ホームページ バックエンド開発 PHPチュートリアル javascript - 有个文章中图片的懒加载lazyload.js的疑问?

javascript - 有个文章中图片的懒加载lazyload.js的疑问?

Jun 06, 2016 pm 08:22 PM
javascript php

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

回复内容:

有个文章中图片的懒加载lazyload.js的疑问?

修改目标img元素的src属性为orginal属性,从而中断图片的加载。

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

求大神指点啊!

lazyloa的使用需要这样啊,需要增加一个orginal属性指向原图啊,那我文章中的图片,岂不是需要在服务器端用正则处理一下吗,这多麻烦啊!!!

图片lazyload就需要这样,这个和服务器没有任何关系。服务器端写正则干什么?

lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗?

orginal属性指向原图就是达到这个目的的啊,orginal这个属性是img标签没有的,浏览器DOM解析器只是当成一个普通的用户自定义属性,不会将其当成src属性那样去加载图片信息

js不是有个页面加载完毕(html加载完毕,但资源没开始加载的事件吗?好像是onreadystatechange啥玩意的,忘了)我都晓得有这样的事件,lazyloa难道不知道吗,还需要img配合它,想的太美了吧,我都知道这样改img,还要你lazyloa干嘛,写个滚动事件不就完事了吗?

这段有点不理解,是可以通过监听页面滚动事件将lazyload激活,加载真实的图片数据,通过将orgina属性值赋给src属性

例如下:
初次页面加载的时候加载到的DOM元素是这样的
<img src="/static/imghw/default1.png" data-src="loading.gif" class="lazy" orginal="realImageFilePath" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
那么当页面加载的时候,回去加载loading.gif,而这个文件通常就很小,能够马上加载
这样当不需要图片显示的时候,例如图片在页面的中下部,用户还没有滚动到指定位置时候,这是的图片数据就不需要加载,减少页面流量及页面的渲染数据,window.onload事件监听能更快的得到响应。这个和documentonready事件无关。
当需要显示图片的时候,也就是用户滚动到页面特定位置的时候,通过JS将img的src属性指向orginal属性的值,同时可将orginal属性删除
<img src="/static/imghw/default1.png" data-src="realImageFilePath" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >
此时img指向真实的地址,图片数据才开始加载

为什么要设置original属性来实现lazyload

<code>浏览器中几乎所有操作(除了网络操作)都是在单线程中进行的。网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。
主线程有个一个事件循环,是一个无限循环,永远处于接受处理状态,并等待 事件(如布局和绘制事件)发生,并进行处理。
那么图片资源的加载就是一个网络操作,当浏览器解析到一个img标签时,就会用src指定的网络地址去加载图片信息,而不是等到documentonready事件监听执行完毕后再去加载资源,所以为了实现lazyload(不加载真实的图片资源),需要设置一个自定义属性来保存真实地址,在需要显示的时候再设置到src属性上</code>
ログイン後にコピー

我们可以做个简单的实验,看src是不是会被加载请求:
如下:
页面执行后,我们能chrome的资源控制台能看到
Failed to load resource: the server responded with a status of 404 (Not Found)
的提示信息
所以错误的资源请求还是发生了

<code>


    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>
       //documentonready
        $(function(){
            //在其中修改src属性值,以期实现在documentonready中修改omg src为一个占位图片
            //而不加载真实图片数据
            $('img').each(function(index,item){
                $(item).attr("original",$(item).attr('src'));
                $(item).attr("src","http://sfault-avatar.b0.upaiyun.com/305/423/3054230534-561d20a868d2e_big64");
            });
        });

    </script>


<!--错误的图片地址-->
<img  src="/static/imghw/default1.png" data-src="http://ubmcmm.baidustatic.com/media/v1/0f0005yYIsGLBGDGfPud1000001111.png" class="lazy" alt="javascript - 有个文章中图片的懒加载lazyload.js的疑问?" >

</code>
ログイン後にコピー

lazyload 本身只是个辅助,当然其功能直接手写代码能实现. 你非要让它来完成它力所不能及的事情自然是不行的.

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。

PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法 PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法 Dec 20, 2024 am 11:31 AM

Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、

今まで知らなかったことを後悔している 7 つの PHP 関数 今まで知らなかったことを後悔している 7 つの PHP 関数 Nov 13, 2024 am 09:42 AM

あなたが経験豊富な PHP 開発者であれば、すでにそこにいて、すでにそれを行っていると感じているかもしれません。あなたは、運用を達成するために、かなりの数のアプリケーションを開発し、数百万行のコードをデバッグし、大量のスクリプトを微調整してきました。

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

JSON Web Tokens(JWT)とPHP APIでのユースケースを説明してください。 JSON Web Tokens(JWT)とPHP APIでのユースケースを説明してください。 Apr 05, 2025 am 12:04 AM

JWTは、JSONに基づくオープン標準であり、主にアイデンティティ認証と情報交換のために、当事者間で情報を安全に送信するために使用されます。 1。JWTは、ヘッダー、ペイロード、署名の3つの部分で構成されています。 2。JWTの実用的な原則には、JWTの生成、JWTの検証、ペイロードの解析という3つのステップが含まれます。 3. PHPでの認証にJWTを使用する場合、JWTを生成および検証でき、ユーザーの役割と許可情報を高度な使用に含めることができます。 4.一般的なエラーには、署名検証障害、トークンの有効期限、およびペイロードが大きくなります。デバッグスキルには、デバッグツールの使用とロギングが含まれます。 5.パフォーマンスの最適化とベストプラクティスには、適切な署名アルゴリズムの使用、有効期間を合理的に設定することが含まれます。

母音を文字列にカウントするPHPプログラム 母音を文字列にカウントするPHPプログラム Feb 07, 2025 pm 12:12 PM

文字列は、文字、数字、シンボルを含む一連の文字です。このチュートリアルでは、さまざまな方法を使用してPHPの特定の文字列内の母音の数を計算する方法を学びます。英語の母音は、a、e、i、o、u、そしてそれらは大文字または小文字である可能性があります。 母音とは何ですか? 母音は、特定の発音を表すアルファベットのある文字です。大文字と小文字など、英語には5つの母音があります。 a、e、i、o、u 例1 入力:string = "tutorialspoint" 出力:6 説明する 文字列「TutorialSpoint」の母音は、u、o、i、a、o、iです。合計で6元があります

PHPでの後期静的結合を説明します(静的::)。 PHPでの後期静的結合を説明します(静的::)。 Apr 03, 2025 am 12:04 AM

静的結合(静的::) PHPで後期静的結合(LSB)を実装し、クラスを定義するのではなく、静的コンテキストで呼び出しクラスを参照できるようにします。 1)解析プロセスは実行時に実行されます。2)継承関係のコールクラスを検索します。3)パフォーマンスオーバーヘッドをもたらす可能性があります。

PHPマジックメソッド(__construct、__destruct、__call、__get、__setなど)とは何ですか? PHPマジックメソッド(__construct、__destruct、__call、__get、__setなど)とは何ですか? Apr 03, 2025 am 12:03 AM

PHPの魔法の方法は何ですか? PHPの魔法の方法には次のものが含まれます。1。\ _ \ _コンストラクト、オブジェクトの初期化に使用されます。 2。\ _ \ _リソースのクリーンアップに使用される破壊。 3。\ _ \ _呼び出し、存在しないメソッド呼び出しを処理します。 4。\ _ \ _ get、dynamic属性アクセスを実装します。 5。\ _ \ _セット、動的属性設定を実装します。これらの方法は、特定の状況で自動的に呼び出され、コードの柔軟性と効率を向上させます。

See all articles