{"id":51400678,"url":"https://github.com/tea3/jquery-inview-fixed","last_synced_at":"2026-07-04T06:07:07.132Z","repository":{"id":199197893,"uuid":"102361034","full_name":"tea3/jquery-inview-fixed","owner":"tea3","description":"Added data-offset option to jquery.inview .","archived":false,"fork":false,"pushed_at":"2017-09-04T12:54:42.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-10-10T07:25:57.938Z","etag":null,"topics":["added-data-offset-option","lazy-loading","lazyload"],"latest_commit_sha":null,"homepage":"https://github.com/protonet/jquery.inview","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tea3.png","metadata":{"files":{"readme":"README.textile","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-09-04T12:51:47.000Z","updated_at":"2017-09-05T00:39:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"d46c6fc2-87e7-4e57-9b0d-55168f37c2eb","html_url":"https://github.com/tea3/jquery-inview-fixed","commit_stats":null,"previous_names":["tea3/jquery-inview-fixed"],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/tea3/jquery-inview-fixed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tea3%2Fjquery-inview-fixed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tea3%2Fjquery-inview-fixed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tea3%2Fjquery-inview-fixed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tea3%2Fjquery-inview-fixed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tea3","download_url":"https://codeload.github.com/tea3/jquery-inview-fixed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tea3%2Fjquery-inview-fixed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35111476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["added-data-offset-option","lazy-loading","lazyload"],"created_at":"2026-07-04T06:07:06.496Z","updated_at":"2026-07-04T06:07:07.118Z","avatar_url":"https://github.com/tea3.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"h1. Element 'inview' Event Plugin\n\nEvent that is fired as soon as an element appears in the user's viewport.\n\n*Author:* \"Christopher Blum\":http://twitter.com/ChristopherBlum\n*Original idea and concept by:* \"Remy Sharp\":http://remysharp.com/2009/01/26/element-in-view-event-plugin/\n*Forked from:* \"https://github.com/zuk/jquery.inview/\":https://github.com/zuk/jquery.inview/\n*Demo* (loading lolcats when they scroll into view): \"http://tifftiff.de/jquery.inview/example/live_event.html\":http://tifftiff.de/jquery.inview/example/live_event.html\n*Requires:* jQuery 1.4+\n\nh2. Usage\n\nThe script makes use of the new $.contains method - so it will only work with jQuery 1.4 upwards. If you need to use it with older versions of jQuery, drop a comment, and I'll post an alternative.\n\nThe event will only fire when the element comes in to view of the viewport, and out of view. It won't keep firing if the user scrolls and the element remains in view.\n\nThe variable after the event argument indicates the visible state in the viewport.\nThe third variable visiblePartX detects which horizontal part of the element is visible to the user (possible values: left, right, both)\nThe fourth variable visiblePartY detects which vertical part of the element is visible to the user (possible values: top, bottom, both)\n\nbc.. $('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {\n  if (isInView) {\n    // element is now visible in the viewport\n    if (visiblePartY == 'top') {\n      // top part of element is visible\n    } else if (visiblePartY == 'bottom') {\n      // bottom part of element is visible\n    } else {\n      // whole part of element is visible\n    }\n  } else {\n    // element has gone out of viewport\n  }\n});\n\np. To stop listening for the event - simply unbind:\n\nbc.. $('div').unbind('inview');\n\np. Remember you can also bind once:\n\nbc.. $('div').one('inview', fn);\n\nh2. Live events\n\nYep, inview events can also be used with .live/.delegate methods.\n_Please note that this could slow down your app when the selector is too complex and/or matches a huge set of elements._\nThe following code snippet only loads images when they appear in the browser's viewport.\n\nbc..  // Assuming that all images have set the 'data-src' attribute instead of the 'src'attribute\n  $(\"img[data-src]\").live(\"inview\", function() {\n    var $this = $(this);\n    $this.attr(\"src\", $this.attr(\"data-src\"));\n    // Remove it from the set of matching elements in order to avoid that the handler gets re-executed\n    $this.removeAttr(\"data-src\");\n  });\n\nh2. More complex example\n\nThis way we can attach inview to some DIV in our code to, for example, detect when it FULLY readed by user (user sees it's bottom and top) and only after 1 seconds of view, so after we call some out stats function or whatever\n\nbc.. $(someMyOneDiv).bind('inview', function(e, isInView, visiblePartX, visiblePartY) {\n  var elem = $(this);\n\n  if (elem.data('inviewtimer')) {\n    clearTimeout(elem.data('inviewtimer'));\n    elem.removeData('inviewtimer');\n  }\n\n  if (isInView) {\n    elem.data('inviewtimer', setTimeout(function() {\n      if (visiblePartY == 'top') {\n        elem.data('seenTop', true);\n      } else if (visiblePartY == 'bottom') {\n        elem.data('seenBottom', true);\n      } else {\n        elem.data('seenTop', true);\n        elem.data('seenBottom', true);\n      }\n\n      if (elem.data('seenTop') \u0026\u0026 elem.data('seenBottom')) {\n        elem.unbind('inview');\n        // here we will do WHAT WHE NEED (for ex. Call Ajax stats collector)\n        ...\n      }\n    }, 1000));\n  }\n});\n\nh2. Using offset\n\nIf you use this code for lazy loading images, sometimes you are interested to preload the image when it's getting close to the view port. So you can add a offset to the target element.\n\nAdd offset from 300px to all sites from the view port. Example: Your view port is 600x800 px, so the new one will be 1200x1400. All images in this area will be preloaded.\n\n```html\n\u003cimg data-offset=\"300\"\u003e\n```\n\nAdd offset from 300px to top and bottom of view port. Example: Your view port is 600x800 px, so the new one will be 600x1400.\n\n```html\n\u003cimg data-offset-top=\"300\"\u003e\n```\n\nAdd offset from 300px to left and right of the view port. Example: Your view port is 600x800 px, the new will be 1200x1400px.\n\n```html\n\u003cimg data-offset-left=\"300\"\u003e\n```\n\nh2. How it works\n\nAn interval in the background checks the position of the elements against the viewport dimensions and the scroll position.\n\nHowever, I wanted to create a utility that would only check the elements that were registered under the 'inview' event, i.e. I didn't want to keep checking the element list if we unbind from the event.\n\nThis is achieved by dipping in to the $.cache store within jQuery, and looping through, looking for the elements tied to the 'inview' event.\n\nThis way the user can treat it like a native event on the page.\n\nh2. Use cases\n\n* Reduce http requests and traffic on server by loading assets (images, javascript, html, ...) only when they are visible to the user\n* Endless scrolling (twitter-like)\n* Tracking (eg. to see whether a user has read an entire article)\n* ...\n\nh2. Browser Compatibility\n\nh4. The Test Suite succeeds in the following browsers that were tested:\n\n* Firefox 3+\n* Safari 3+\n* Chrome 7+\n* Opera 10+\n* IE 6+\n* Mobile Safari on iPad 4.2.2\n* Fennec 4b on Android 2.2\n* Opera Mobile 10.1b on Android 2.2\n\nh4. The Test Suite doesn't completely succeed but the demos in this repository work without problems in the following browsers:\n\n* Mobile WebKit on Android 2.2\n* Mobile WebKit on Palm Pre 1\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftea3%2Fjquery-inview-fixed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftea3%2Fjquery-inview-fixed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftea3%2Fjquery-inview-fixed/lists"}